「vue」使用路由守卫控制路径的访问权限

「vue」使用路由守卫控制路径的访问权限

1. 使用 redirect属性重定向路由到指定位置

在vue项目中，我们经常会遇到项目中使用路由嵌套,并且想要在进入嵌套路由中的父级路由的时候，默认跳转进入其中一个子路由中，以避免网页子路由部分显示区域为空的尴尬情况

这个时候就可以使用redirect属性

redirect解释：vue官网

如果路由是直接匹配的，那么重定向到哪里呢。重定向发生在所有导航守卫之前，并以新的目标位置触发一个新的导航。也可以是一个接收目标路由地址并返回我们应该重定向到的位置的函数。

使用方法

{
    path: '/center',
    component: Center,
    //默认是myorder，使用redirect跳转
    redirect: '/center/myorder',
    meta: {
        show: true
    },
    //二级路由
    children: [{
        path: 'myorder',
            component: myOrder,
            meta: {
                show: true
            },
        },
        {
        path: 'grouporder',
        component: GroupOrder,
        meta: {
            show: true
        },
    }]
},

P.S:其实上面的路由跳转可以写到子路由内，但是我觉得写在里面在可读性方面不是很好（（（

上面的代码就可以默认将/center路由自动重定向到/center/my order中，用户访问/center路由等同于访问/center/my order路由

redirect属性也可以跟一个函数：

redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }//如果使用相对路径，就不用加/
    },