Vue动态菜单（路由）的实现⽅案
（beforeEach+addRoutes+element。。。路由表写在前端，后端返回⽤户的⾓⾊，前端进⾏⾓⾊对应的菜单渲染
开始之前，⾃⼰要⼤概懂写关于vue-router的beforeEach(路由拦截)、addRoutes，等⽅法，不然理解可能会有点吃⼒思路
分以下⼏步：
1.前端在本地写好路由表，以及每个路由对应的⾓⾊，也就是哪些⾓⾊可以看到这个菜单/路由；
2.登录的时候，向后端请求得到登录⽤户的⾓⾊(管理者、普通⽤户)；
3.利⽤路由拦截，根据取到的⽤户⾓⾊，跟本地的路由表进⾏对⽐，过滤出⽤户对应的路由，并利⽤路由进⾏左侧菜单渲染实现
根据上述的3步，我们进⾏每⼀步的实现
1.前端本地写好路由表
我们分成两个路由表，⼀个是固定的，⽐如⾸页展⽰，每个⼈都能看到，⼀个需要根据⽤户⾓⾊动态展⽰的;
这⾥就利⽤到了router的meta属性，我们在这⾥边写上菜单对应的:icon，对应的哪些⾓⾊可以看到这个菜单:roles
⼀个完整的路由表如下：
//代码位置：router/index.js
{
path: '',
component: layout, //整体页⾯的布局(包含左侧菜单跟主内容区域)
children: [{
path: 'main',
component: main,
meta: {
title: '⾸页', //菜单名称
roles: ['user', 'admin'], //当前菜单哪些⾓⾊可以看到
icon: 'el-icon-info' //菜单左侧的icon图标
}
}]
}
2.⽤户登录，取到⽤户的⾓⾊
本来我是写了mock数据，模拟⽤户登录，请求后端⾓⾊的接⼝，奈何mock挂了，
所以我就直接模拟了：
取到⽤户⾓⾊，存放进localStorage，然后跳转主页
/
/代码位置：src/components/reLoad.vue
// axios.post('/temp',this.formModel).then(res=>{})
// 我暂时就不模拟了，直接取
let getUserRole = this.formModel.user === 'admin' ? 'admin' : 'user'
localStorage.setItem('userRole', getUserRole)
this.$router.push({
path: '/main'
})
3.路由拦截beforeEach，并过滤出⾓⾊对应的路由表
经过第2步，我们已经得到了⽤户的⾓⾊，这时候在路由拦截的地⽅我们就可以取到了，
取到之后，结合第1步我们写好的路由，利⽤数组的filter⽅法，拿⾓⾊跟路由表⾥meta标签⾥的roless数据进⾏对⽐
过滤好了，拿当前路由去渲染左侧菜单，这⼀步其实可以⽤vuex去实现，我担⼼有的⼩伙伴不理解，就⽤⼀个global(全局变量)替代了尤其要注意路由拦截这⾥，很容易陷⼊死循环，所以我建议⼤家先了解⼀下beforeEach和addRoutes的运⾏机制
//代码位置：src/permission.js
router.beforeEach((to, from, next) => {
// 取到⽤户的⾓⾊
let GetRole = Item("userRole")
// 如果登录了
if (GetRole !== 'unload') {
next() //next()⽅法后的代码也会执⾏
// 1.如果路由表没根据⾓⾊进⾏筛选，就筛选⼀次
if (!addRouFlag) {
addRouFlag = true
// 2.根据⽤户的⾓⾊、和需要动态展⽰的路由，⽣成符合⽤户⾓⾊的路由
var getRoutes = baseRoleGetRouters(permissionRouter, GetRole.split(","))
// 3.利⽤global属性，让渲染菜单的组件sideMeuns.vue重新⽣成左侧菜单
global.antRouter = at(getRoutes)
// 4.将⽣成好的路由addRoutes
router.at(getRoutes))
// 5.push之后，会重新进⼊到beforeEach的钩⼦⾥，直接进⼊第⼀个if判断
router.push({ path: to.path })
}
} else {
/
/ ⽤户没登录，跳转到登录页⾯
if (to.path === '/') {
next()
} else {
next('/')
vue element admin}
}
})
整体流程⾛完了，再容易让⼈蒙的地⽅
1.根据路由进⾏菜单展⽰
代码位置：/src/components/sideMeuns.vue,
先看下，把⼀些基础的参数先了解⼀下，
这⾥我把菜单渲染写成了⼀个组件：
⽤到了递归属性，保证可以⽣成多级菜单，
我建议不熟悉的，⼤家⽤组件先模拟着写⼀个包含跳转功能、icon展⽰的菜单，然后再看我写的组件
2.⽤户退出系统
代码位置：/src/components/layout.vue
退出的时候，记得清除掉存在localStorage的⽤户⾓⾊，
然后利⽤ window.location.href = "/"跳转到登录页，
为什么要⽤location.href，这样会把之前addRoutes的路由清除掉，确保下个⽤户登陆后，会重新渲染正确的菜单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。