VUE Router - 嵌套路由不呈现

Question

我希望社区能够对此事有所了解。我希望在我的 Vue 应用程序中嵌套一些路由（这是我的第一个 vue 项目）。我的主要路线正常，包括 parent 路线配置文件。

我已经按照文档进行操作并查看了代码以及一些视频。找不到问题。

我将提供指向存储库的链接，而不是粘贴代码。

router.js 这里 - https://github.com/anaivanm/vue-tw/blob/master/src/router.js

所有 .vue 文件都在视图中，如下所示：https://github.com/anaivanm/vue-tw/tree/master/src/views

我有一些我试图嵌套在 views/profile 文件夹中的 Profile 下，但这也不起作用。

您可以在此处看到带有 router-link 标签的导航栏： https://github.com/anaivanm/vue-tw/blob/master/src/components/SiteHeader.vue

我没有收到任何错误，它只是呈现空白 space，即使路径以正确的方式存在，例如http://localhost:8080/#/profile/saved

个人资料页面出现，所有其他 children - 否。

Answer 1

根据 nested route docs, to get nested routes working you need to add a <router-view></router-view> to the Parent component that the nested routes will render in (Profile.vue)。我在你的个人资料页面中没有看到 <router-view></router-view>，它应该看起来像：

<template>
  <div>
    Profile page.
    <router-view></router-view>
  </div>
</template>

VUE Router - 嵌套路由不呈现

VUE Routes - Nested routes do not render

nested-routes

vue.js

vue-router