Javascript 使用vue路由器的默认子路由

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

在某些场景中，我必须直接显示子vue。我的模板如下：

| voice 1 | voice 2 | voice 3 |

    | submenu 1 | submenu 2 | submenu 3 |

|
| content 1
|

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

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

路由系统遵循菜单结构，因此如果进入

/voice1/子菜单1

，则应显示

内容1

，如果单击子菜单2，则进入

/voice1/子菜单2

并显示

内容2

，依此类推

当用户登录时，我不想显示一个空页面，但我希望路由中已经填充了默认组件（在本例中为

语音1

，

子菜单1

，

内容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');
  }
});

我怎样才能解决这个问题

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

/

：

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

---

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

您可以使用

路由配置中的
重定向
属性重定向任何路由

无论何时调用
/
路由，vuejs都会自动重定向到
/voice1/submenu1

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

路线：[
{
路径：“/”，
重定向：“/voice1/submenu1”，现在的问题是，如果我从
/voice1/submenu2
重新加载页面，会将我重定向到
/voice1/submenu1
@ste你测试过我的答案吗？ste我建议你在你的机器上测试它并确认。因为重定向属性在我的机器上工作正常。我不能，这是错误的一个专有项目，使用JSFIDLE，我可以用不同的路由刷新页面，但事实就是这样：基本上，重定向会在刷新过程中捕获所有子路由，因此如果我刷新
/voice1/submenu2
或
/voice1/submenu3
，我最终会进入
voice1/submenu1