vue-router 的默认子路由

Question

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

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

| voice 1 | voice 2 | voice 3 |

    | submenu 1 | submenu 2 | submenu 3 |

|
| content 1
|

所以基本上我有一个菜单，当你select一个菜单语音时显示相关的子菜单，当你select一个子菜单语音时显示相关的内容。

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

当用户登录时，我不想显示一个空页面，但我希望路由已经填充了默认组件（在本例中 voice 1、submenu 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');
  }
});

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

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,
    },
  ],
});

我该如何解决这个问题？

Divine 的问题是正确的，问题是我有这行代码将我所有的路由重定向到 /:

this.$router.push('/');

在包含整个应用程序的包装器组件中。删除该行后一切正常。

Answer 1

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

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

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

vue-router 的默认子路由

default children route with vue-router

javascript

vue.js

vue-router