本文主要是介绍Vue实现多角色登录，Vue-Router路由守卫控制权限页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现页面侧边栏和头部不变，当点击某个功能时，只有主体部分发生变化，这要用到子路由技术
我的项目结构如上，其中包含侧边栏和头部的文件是Manage.vue，主页面是Home.vue，个人页面是Person.vue，用户表单页面时Patient.vue，其中Home.vue，Person.vue，Patient.vue都是Manage.vue的子路由
1.添加子路由
在父级路由Manage.vue中添加了四个子路由
2.添加<router-view>
<el-main><router-view /></el-main>将主页面部分的代码转换成<router-view>，这样，当我们进入某个子路由路径时，该区域就会显示该路由对应的页面
效果如下：
主页面：
用户信息页面：
可以看到，主页面在变，而侧边栏和头部样式没有改变
3.添加路由守护
为了防止非管理员角色，通过url路径栏访问到只有管理员才能访问的页面，这时我们就需要在index.js文件中添加路由守卫
router.beforeEach((to, from, next) => {//to 到达的路由信息//from 开始的路由信息//next 完成页面跳转let user = JSON.parse(localStorage.getItem('user') || '{}')let adminPaths= ['/patient']//如果这个角色不是管理员，并且他访问的路径是管理员才能访问的路径,就让他跳转到403if (user.role!=='管理员' && adminPaths.includes(to.path)){next('/403')}else{next()}
})路由守卫中有三个参数，to表示到达的路由信息，from表示开始的路由信息，next表示完成页面跳转
- let adminPaths = ['/patient'] 添加管理员才能访问的路径
- adminPaths.includes(to.path) 将adminPaths添加到跳转路径里
效果展示：
当非管理员角色，访问管理员才能访问的页面，就会跳转到403页面
4.添加404页面
当用户访问的路径找不到时，就会跳转到404页面，添加404页面的路由
- ' * ' ：表示这个路由将匹配所有未被其他路由匹配到的路径
{path: '*',name: '404',meta:{name:'无法访问'},component:()=> import('../views/404.vue')},这篇关于Vue实现多角色登录，Vue-Router路由守卫控制权限页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
