vue-router怎么动态配置，比如根据用户权限不同显示路由

Posted 2023-04-30

1、vue-router怎么动态配置，比如根据用户权限不同显示路由

如上图，我想根据用户权限不同，动态添加删除菜单
下面是路由配置
const routes = [

path: '/',
component: Home,
name: '系统管理',
iconCls: 'el-icon-setting',
children: [
path: '/Page12', component: Page12, name: '组织机构' ,
path: '/Page9', component: Page9, name: '管理员' ,
path: '/Page11', component: Page11, name: '用户管理' ,
path: '/Page7', component: Page7, name: '用户反馈' ,
path: '/Page6', component: Page6, name: '关于我们' ,
path: '/Page8', component: Page8, name: '联系我们' ,
path: '/Page10', component: Page10, name: '个人中心'
]

]

1月20日提问
评论
邀请回答
编辑

查看全部 2 个回答

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问
路由就是按照你这样配置的，然后你的菜单单独配置：放在store里面，根据用户权限配置菜单。如果更进一步，可以配置accessMenu,就好像这样

router.beforeEach ((to, from, next) =>
let accessMenu = store.state.env.accessMenu
let hasLogin = store.state.env.haslogin
if (to.name === 'login')
next()
else
if (accessMenu.length === 0 || hasLogin === false)
// 跳转到登录页
next(name: 'login')
else
if (to.name === 'home')
next()
else
// 查看路径是否在允许的路由内
const toName = to.name
console.log(toName)
if (!toName)
next(name: 'home')
else
let canGo = findName(toName,accessMenu)
console.log(canGo)
if (canGo)
next()
else
next(name: 'home') 参考技术A 你这个要求很简单，一旦有故障才走电信，那就是说电信是完全备份线路，你更改路由的metric就可以选择一个默认优先，另一个备份
...可以啊.若你能配置核心...vue-router怎么动态配置，比如根据用户权限不同显示路由

Vue实现动态路由

参考技术A

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

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

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

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

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

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