vue实现权限路由,vue权限控制路由
最近用vue框架做了一个后台管理项目，涉及到权限，所以下面这篇文章主要介绍vue2/vue3路由权限管理的相关信息，有需要的朋友可以参考一下。
1. Vue 路由权限控制一般有2种方法
一、路由元信息(meta)
b、动态加载菜单和路由(addRoutes)
2 路由元信息（meta）来进行路由权限控制
2.1 在vue2种的实现
如果一个网站有不同的角色，比如管理员和普通用户，需要不同的角色访问不同的页面。
这时候我们可以把所有的页面都放在路由表里，访问的时候只需要判断角色权限就可以了。有权限就让它被访问；如果没有权限，拒绝，跳到404页。
Vue-router在构建路由时提供元信息元配置接口。我们可以在元信息中添加路由对应的权限，然后在路由卫士中检查相关权限，控制其路由跳转。
在每个路由的元属性中，可以将可以访问路由的角色添加到角色中。每次登录后，都会返回用户的角色。然后，在访问页面时，将路由的元属性与用户的角色进行比较。如果用户的角色在路由的角色中，那么它可以被访问，如果不是，那么它将被拒绝。
以下是vue2的实现：
从“vue-router”导入VueRouter
Vue.use(VueRouter)
.
路线：[
{
路径：“/login”，
名称：登录，
元：{
角色：[管理员，用户]
},
组件：()=导入(./components/Login.vue )
},
{
路径：“主页”，
姓名：家，
元：{
角色：[admin]
},
组件：()=导入(./views/home . vue’)
},
]
const router=new VueRouter({
路线
})
导出默认路由器
在app.vue文件下引入并注册全局路由卫士。
//假设有两个角色：管理员和用户
//从后台获取的用户角色
常量角色=用户
//当你进入一个页面时，导航卫士router.beforeEach事件会被触发。
router.beforeEach((收件人，发件人，下一个)={
if(to . meta . roles . includes(role)){
Next() //释放
}esle{
Next({path:/404}) //跳到第404页
}
})
自此，基本上完成了路线的门禁。
路由卫士中的题外话也可以解决路由到404页面无法匹配的业务需求，实现如下：
从导入路由器。/路由器
router.beforeEach((收件人，发件人，下一个)={
//.
if (to.matched.length===0) {
下一个(/404 )
}否则{
下一个()
}
//console.log(to，from，next， route guard )
})
2.2 在vue3种的实现
其实想法也差不多，但是需要注意的是，vue3和vue2中路由的使用方式有一些细微的区别。用我的simpler 404创建一个vue3的实例，根据vue2和下面的代码就可以完成vue3的路由权限控制。实现代码如下：
创建路线：
从“vue-router”导入{ createRouter，createWebHashHistory }；
.
路线：[
{
路径：“/login”，
名称：登录，
元：{
角色：[管理员，用户]
},
组件：()=导入(./components/Login.vue )
},
{
路径：“主页”，
姓名：家，
元：{
角色：[admin]
},
组件：()=导入(./views/home . vue’)
},
]
const router=createRouter({
history: createWebHashHistory()，
路由：路由器
})
导出默认路由器；
路由保护(App.vue中的全局注册):
导入{
用户外部
}来自‘vue-router’；
导出默认值{
名称：“应用程序”，
setup() {
const router=user outer()；
router.beforeEach((收件人，发件人，下一个)={
//.
if (to.matched.length===0) {
下一个(/404 )
}否则{
下一个()
}
})
}
}
4 . 动态加载菜单和路由(addRoutes)
通过根据用户权限或用户属性动态添加菜单和路由表，可以定制用户的功能。vue-router提供了addRoutes()方法，可以动态注册路由。需要注意的是，动态添加路由是在路由表中推送路由。由于路由是按顺序匹配的，所以有必要将诸如404页之类的路由放在动态添加的末尾。
5.总结
不管是vue2还是vue3，其实实现思路都差不多，只是使用接口的细节会略有不同。对于我们来说，学习的重点一定不是某个框架，而是训练自己的思维。
关于vue2/vue3路由权限管理的这篇文章到此为止。有关vue路由权限管理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。