Vue Js 路由 - 没有路径的父级答案

【问题标题】：Vue Js Routing - Parent without pathVue Js 路由 - 没有路径的父级
【发布时间】：2018-04-03 21:11:23
【问题描述】：

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

路由文件如下所示：

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

当然这会造成复杂性，因为路径是相同的。有没有办法让父组件没有路径？

【问题讨论】：

您找到解决方案了吗？我正在做类似的事情，我认为这是唯一的方法。
@BlackCode 对不起，这是很久以前的事了。我最终将Auth 组件的路径更改为/auth（我认为）。也许您应该提出一个新问题来解释您想要什么，在评论中标记我或其他内容。
谢谢！别担心托马斯。最后我像你一样做，但使用导航守卫重定向，以防用户未登录或页面需要身份验证:)

【解决方案1】：

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

类似这样的：

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

【讨论】：

感谢您的评论。是的，这将是一个选择。但是 Vue 开发人员是否认为这是解决这个问题的“干净”解决方案？
这取决于应用程序的复杂性。此方法的一个相当大的缺点是您需要为每个路由 + 身份验证组合使用一个组件。从这个意义上说，我不会认为它 clean，但如果您只有几条要处理身份验证的路由，那么这可能是最直接的解决方案。我不确定您的项目的设计是什么，但在不更改路由的情况下处理登录的更常见方法是在单击登录按钮时在模式对话框中显示用户名/密码表单。