0

我正在尝试创建一个简单的嵌套路由：

  • 应用程序（根组件，主导航）
  • Topic1（子导航）
    • 主题1/子
  • 主题2

我在 Codesandbox上的演示存在以下问题：

1.当从 导航/topic1到 时/topic1/sub，我希望内容 fromtopic1显示出来，内容 fromtopic1/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

我似乎遗漏了一些重要的东西 - 已经感谢您的任何回答。

4

1 回答 1

1

App组件显示两次，因为它安装了两次。首先，它在main.js您创建app. 然后将其router-view作为路由组件安装。为避免这种情况，您不应App在路由器中使用该组件，而是制作另一个 Layout 组件，您可以在其中定义要由vue-router. 此外，这将允许在您的应用程序 (App) 有一个入口点的情况下，如果需要，您可以为不同的路线定义不同的布局。

关于第一个问题，Topic1在导航到 Sub 路由时没有显示组件的内容，因为它被包裹在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>

这是工作代码框。我也重构了一点你的路由器index.js。

于 2022-02-06T13:29:16.717 回答