VUE 路由器 - 嵌套路由不渲染

Question

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

我已经阅读了文档并查看了代码以及一些视频。找不到故障。

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

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

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

我有那些我试图在视图/配置文件文件夹中的 Profile 下嵌套的那些，但这也不起作用。

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

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

个人资料页面出现，所有其他孩子 - 不。

Answer 1

根据nested route docs，要使嵌套路由正常工作，您需要将<router-view></router-view> 添加到嵌套路由将在其中呈现的父组件（Profile.vue）。我在您的个人资料页面中没有看到<router-view></router-view>，它应该是这样的：

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