共三个角色：adan barbara carrie 密码全是：123456
adan 拥有 最高权限A 他可以看到 red,yellow 和 blue 页面（共三个页面）
barbara 拥有 权限B 他可以看到 red 和 yellow 页面
carrie 拥有 权限C 他可以看到 red 和 blue 页面
技术栈
项目初始化
项目结构
vue-cil 脚手架初始化项目后，我只修改过src文件夹
重点：
动态路由的关键在于router配置的 meta字段 和vuex的 状态共存 （不懂可以先查看官方文档）
router/index.js
store/modules/lo
gin.js actions部分
main.js
if(store.getters.newrouter.length !== 0){
next() //resolve 钩子
}else{
let newrouter
if (store.getters.role == 'A') { //判断权限
newrouter = powerRouter
} else {
let newchildren = powerRouter[0].children.filter(route => {
if(route.meta){
if(route.meta.role == store.getters.role){
return true
}
return false
}else{
return true
}
});
newrouter = powerRouter
newrouter[0].children = newchildren
}
router.addRoutes(newrouter) //添加动态路由
store.dispatch('Roles',newrouter).then(res => {
next({ ...to })
}).catch(() => {
})
}
}else{
if (['/login'].indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
components/index.vue
此项目拿去 捋清楚 vue+vuex+vue-router 的关系是没问题的，这可以说的超级简单的版本，适合初学。上面的内容说的重点，其实也算是项目的全部啦
总结
以上所述是小编给大家介绍的vue vuex vue-rouert后台项目——权限路由（适合初学）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/34414.html