VueJS 中子路由的条件路由

Question

我想知道如何有条件地重定向子路由。我尝试了很多方法，但其中 none 行得通。

我使用商店中的状态作为重定向子路由的条件。我已经从它所在的文件导出我的商店并将其导入 routes.js:

从“@/store”导入商店

这是处理路由的代码：

{
path: '/import',
component: Layout,
redirect: '/import/table',
name: 'Import',
meta: { title: 'Import', icon: 'el-icon-right' },
children: [
  {
    path: 'tree',
    name: 'Tree',
    component: () => 
    import('@/views/tree/import'),  
    beforeEach: (to,from,next) => {
      //store.state.userRole = 'Admin' redirect the route, otherwise not redirect. 
      if(store.state.userRole = 'Admin') {
        next();
      }
      else {
        next(false);
      }
      meta: { title: 'Create form', icon: 'el-icon-circle-plus-outline' },
    },

    {
    path: 'table',
    name: 'Table',
    component: () => import('@/views/table/importList'),
    meta: { title: 'List', icon: 'el-icon-document' },
    },
  ]
}

Answer 1

每个路由守卫的正确名称是 beforeEnter - 而不是 beforeEach。 https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

VueJS 中子路由的条件路由

Conditional route for children routes in VueJS

javascript

vue.js

vue-router

vuex

vuejs2