vue-动态路由的实现

Posted 2023-04-30

参考技术A 能够传递参数的路由即为动态路由
应用场景 ： 从列表页跳转到详情页
实现步骤：
一. 先创建动态路由组件 detail.vue (一级路由组件)
二、路由配置 （router/index.js）

import detail from '@/views/detail.vue'

ath: '/detail/:id' 等价于 'detail/2' --2即是传递的id
id属性名要和detail中接收参数名一致

Vue实现动态路由

参考技术A

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由
后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息