默認子路由與vue-router

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 ， 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屬性來重定向任何路由

每當調用/ route時，vuejs將自動重定向到/voice1/submenu1

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