vue-router的addRoute方法实现权限控制
程序员文章站
2022-03-29 08:15:06
...
在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置，这里需要注意的是vue-router的options属性并不是响应式的，在添加路由规则后，router.options.routes属性不会改变，目前，如果需要更新router.options.routes，则需要手动更改。
router.addRoutes 添加多条新路由规则
router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
已废弃
router.addRoute 添加一条新路由规则
如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
addRoute(route: RouteConfig): () => void
addRoute方法可用于为现有路由添加子路由规则
addRoute(parentName: string, route: RouteConfig): () => void
下面是在vue中动态添加了路由规则的小例子，来演示router.addRoute的用法
<!doctype html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<title>addRoute Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
const router = new VueRouter({
mode: 'hash',
routes: [
{ path: '/login', component: { template: `<div>login</div>` } },
{ path: '/404', component: { template: `<div>error 404</div>` } }
]
})
new Vue({
el: '#app',
router,
created () {
console.log(this.$router)
console.log('一、配置路由index')
const routes = this.$router.options.routes
console.log(1, routes)
const indexRoute = {
name: 'index',
path: '/',
component: { template: `<div>layout<router-view></router-view></div>` }
}
this.$router.addRoute(indexRoute) // 动态添加路由
routes.splice(0, 0, indexRoute) // 手动更新路由的options属性
console.log(2, routes)
console.log('二、添加子路由')
this.$router.addRoute('index', {
path: 'a',
component: { template: `<div>a</div>` }
})
console.log(routes)
}
})
</script>
</body>
</html>
参考：https://router.vuejs.org/zh/api/#router-addroutes
在项目实践时，通常在用户登录后获取到用户的权限表，可以将这些数据保存到前端（storage和vuex），可以在项目的根组件中将保存的路由记录通过addRoute方法添加到router中去。