Vue Js Routing - 没有路径的父

Question

目前我正在开展一个项目，其中我有两个组件router-view，Auth和Dashboard。这两个组件具有不同的html结构，但在路由path: ''中使用相同的基本路径。

路由文件如下所示：

{
  path: '/',
  component: Dashboard,
  children: [
    ...
  ],
  path: '/',
  component: Auth,
  children: [
    ...
  ]
}

当然，由于路径相同，这将产生复杂性。有没有办法让父组件没有路径？

Answer 1

您可以创建一个有条件地显示Dashboard或Auth组件的新组件，然后将其设置为路由配置中'/'路径的组件。

这样的事情：

<template>
  <auth v-if="isAuthenticating" />
  <dashboard v-else />
</template>