Vue.js 使用 vuerouter 的默认子路由

我有一个Vue 2.使用vue和vue处理应用程序的路由.

在某些情况下，我必须直接显示一个children vue.我的模板如下:

| voice 1 | voice 2 | voice 3 |

    | submenu 1 | submenu 2 | submenu 3 |

|
| content 1
|

所以基本上我有一个菜单，当你 Select 一个菜单声音时，会显示相关的子菜单，当你 Select 一个子菜单声音时，会显示相关的内容.

路由系统遵循菜单 struct ，因此，如果你进入/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,
    },
  ],
});

我该怎么解决这个问题？

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

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

在包含整个应用程序的包装器组件中.一旦go 掉那条线，一切都很好.