Question

我有一个Vue 2.x应用程序，我正在使用vue-router来处理路由。

在某些情况下，我必须直接显示儿童vue。我的模板如下：

| voice 1 | voice 2 | voice 3 |

    | submenu 1 | submenu 2 | submenu 3 |

|
| content 1
|

所以基本上我有一个菜单，当您选择菜单语音时会显示相关子菜单，当您选择子菜单语音时，会显示相关内容。

路线系统遵循菜单结构，因此如果您转到/voice1/submenu1，则应显示content 1，如果您点击子菜单2，则转到/voice1/submenu2并显示content 2等等等等。

当用户登录时，我不想呈现空白页面，但我希望路径已经填充了默认组件（在这种情况下为voice 1，submenu 1，{{ 1}}），但我不知道该怎么做。现在我解决了在我的路径拦截器中添加它的问题：

content 1

但我确信有更好的方法可以做到这一点。我的路线系统如下：

router.beforeEach((to, from, next) ⇒ {
  const token = store.getToken();

  const tokenIsValid = validateToken(token);
  const routeDoesntNeedAuth = routeWithoutAuth.indexOf(to.fullPath) > -1;

  if (tokenIsValid || routeDoesntNeedAuth) {
    if (to.fullPath === '/') {
      next('/voice1/submenu1');       // <- this line does the trick
    }

    next();
  } else {
    next('/login');
  }
});

我该如何解决这个问题？

Divine的问题是正确的，问题是我有这行代码将我的所有路由重定向到export default new Router({ mode: 'history', routes: [ { path: '/', component: AppWrapper, children: [ { path: '/voice1', components: { default: PageWrapper, subMenu: VoiceFirstSubMenu, }, children: [ { path: 'submenu1', components: { mainContent: ContentOne, }, }, { path: 'submenu2', components: { mainContent: ContentTwo, }, }, { path: 'submenu3', components: { mainContent: ContentThree, }, }, ], }, ], }, { path: '/login', component: Login, }, ], });：

在包含整个应用程序的包装器组件中。一旦删除该行，一切都运行良好。

Answer 1

您可以在redirect中使用route config属性来重定向任何路由

每当调用/路线时，vuejs会自动重定向到/voice1/submenu1

routes: [
    {
      path: '/',
      redirect: '/voice1/submenu1', <---- / route will be redirected to /voice1/submenu1
      component: AppWrapper,
      children: [
         ...
      ]
    },
]

默认子路由与vue-router

1 个答案: