用vue做后台管理页面,通常会涉及到权限管理,即,只有在权限允许的情况下才能查看相关页面,比较懒省事的做法通常时动态的隐藏菜单即可,但是这样会有一个问题,通过修改地址栏的相关路由信息,依然可以进入到本不应该看到的页面,这样体验很不好,会带来很多问题。因此,这就需要动态设置或修改路由的相关信息,代码如下:
假设你的路由配置如下:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
现在,假设你有一个页面dynamicRouter.vue,需要根据权限使能够动态的查看到该页面,你只需要在登陆成功时或其他什么地方,写个方法将该页面添加到routes里即可,代码如下:
modifyRouter(){
this.$router.options.routes.push({
path: '/dynamicRouter',
name: 'dynamicRouter',
component: () => import('../components/dynamicRouter.vue')
})
this.$router.addRoutes(this.$router.options.routes)
},
注1:addRoute的参数必须是一个符合 routes 选项要求的数组。
注2:暂时还没删除路由配置相关的方法,因此若要切换权限查看页面,需要刷新一下页面即可
PS:欢迎加入vue技术交流群(864583465)进行更多问题的探讨,你的问题将是我们大家共同进步的关键