vue路由能否根据条件判断来决定是否存在？

Question

如题，比如说一个网站登录后获取role，假如role='1'的时候侧边栏的某一项不显示，那这个路由不就应该去掉才会不显示么？怎么根据这个条件去掉这个router呢？

{
    path: '/order',
    component: Layout,
    redirect: 'noredirect',
    icon: 'form',
    noDropdown: true,
    children: [{
        path: 'index',
        component: _import('order/index'),
        name: '预约'
    }]
},

举个例子，比如说这个路由，在项目中是在侧边栏显示的，如下：

当role='1'时，侧边栏显示如下：

如何做到这种条件判断呢？求解蟹蟹 0_0

Answer 1

去掉左边很容易，但是通过url还是可以访问到的，不过是障眼法罢了。如果要这样做的话，直接对左边菜单数组进行修改就行了。
另外一种就是初始只挂载登录和主页，登录成功后在动态挂载相应的权限。这个你可以参考花裤衩出的 手摸手教程

https://segmentfault.com/a/11...

Answer 2

可以通过导航守卫实现。role就是你要判定的那个role

{
    path: '/index:role',
    component: someComponent,
    beforeEnter (to, from, next) {
        if (to.params.role===1)) {
          next(false)
        }else{
          next()
        }
    }
}

关于导航守卫的更多信息你可以参考：
https://router.vuejs.org/zh-c...

但是如果你是要例子中的那种效果的话，我觉得你用v-show的效果更好

Answer 3

这个不关路由的事 这种权限控制应该在Vue中实现
你不显示那一项 然后用路由导航拦截访问