Vue 路由器 - 嵌套路由未按预期工作
Vue Router - Nested Routes Not Working as Expected
我正在尝试创建一个简单的嵌套路由：
- App（根组件，主导航）
- 主题1（子导航）
- Topic1/Sub
- 主题2
我的 demo on Codesandbox 有以下问题：
1. 当从 /topic1 导航到 /topic1/sub 时，我希望显示来自 topic1 的内容以及来自 topic1/sub 如下所示，如下所示：
然而，Topic 1 不再显示。
2.如何避免显示两次“App”？
我知道我已经添加了 path: "/topic1", component: App, 但这只是因为没有它路由根本不起作用。根据 router/index.js 中的评论：
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
我似乎遗漏了一些重要的东西 - 谢谢你的回答。
App 组件显示两次，因为它被安装了两次。首先，当您创建 app 时，它会安装在 main.js 中。然后作为路由组件挂载在router-view中。为避免这种情况，您不应在路由器中使用 App 组件，而应创建另一个 Layout 组件，您可以在其中定义要由 vue-router 使用的页面布局。此外，这将允许在您的应用程序 (App) 具有单个入口点的情况下，如果需要，您可以为不同的路线定义不同的布局。
关于第一个问题，Topic1组件的内容在导航到子路由时没有显示，因为它被包裹在router-view中。 router-view 只显示当前路由组件的内容。避免在 router-view 中放置任何内容，因为它会在路线导航中被替换。这将起作用：
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
这里是working codesandbox。
我还重构了你的路由器 index.js.
我正在尝试创建一个简单的嵌套路由：
- App（根组件，主导航）
- 主题1（子导航）
- Topic1/Sub
- 主题2
我的 demo on Codesandbox 有以下问题：
1. 当从 /topic1 导航到 /topic1/sub 时，我希望显示来自 topic1 的内容以及来自 topic1/sub 如下所示，如下所示：
然而，Topic 1 不再显示。
2.如何避免显示两次“App”？
我知道我已经添加了 path: "/topic1", component: App, 但这只是因为没有它路由根本不起作用。根据 router/index.js 中的评论：
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
我似乎遗漏了一些重要的东西 - 谢谢你的回答。
App 组件显示两次，因为它被安装了两次。首先，当您创建 app 时，它会安装在 main.js 中。然后作为路由组件挂载在router-view中。为避免这种情况，您不应在路由器中使用 App 组件，而应创建另一个 Layout 组件，您可以在其中定义要由 vue-router 使用的页面布局。此外，这将允许在您的应用程序 (App) 具有单个入口点的情况下，如果需要，您可以为不同的路线定义不同的布局。
关于第一个问题，Topic1组件的内容在导航到子路由时没有显示，因为它被包裹在router-view中。 router-view 只显示当前路由组件的内容。避免在 router-view 中放置任何内容，因为它会在路线导航中被替换。这将起作用：
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
这里是working codesandbox。
我还重构了你的路由器 index.js.