子路由未显示在 Vue-router 中答案

【问题标题】：Child route not showing in Vue-router子路由未显示在 Vue-router 中
【发布时间】：2021-03-08 17:30:42
【问题描述】：

我在 Vue 路由器中关注对象。

{
  path: "/books",
  name: "books",
  component: Books,
  children: [
    {
      path: ":id",
      name: "books.detail",
      component: BookDetail,
    }
  ]
}

在Books.vue 组件中，有<router-link>，在单击每个组件时；它应该转到其详细视图。

<router-link :to="{ name: 'book.detail', params: { id: 5 }}">
  <h2>Book Name</h2>
</router-link>

同样在App.vue 中，我关注了<router-view>。

<div class="books">
  <router-view></router-view>
</div>

当我点击<router-link> 时，路径会更新，但相应的BookDetail 页面没有显示。

这是我第一次在项目中集成路由器，但无法弄清楚如何解决它，甚至深入阅读了文档。

【问题讨论】：

标签： javascript vue.js vue-router nested-routes

【解决方案1】：

在Books.vue 中需要有一个额外的<router-view> 来显示嵌套路由组件。没有它，你会得到你描述的行为。

Books.vue

<template>
  <div>
    Books
    <router-view></router-view>
  </div>
</template>

或者如果您不想要嵌套路由，请将详细信息页面定义为单独的路由：

{
  path: "/books",
  name: "books",
  component: Books
},
{
  path: "/books/:id",
  name: "books.detail",
  component: BookDetail
}

（注意：<router-link> 中也有一个错字（book 而不是books），但由于您能够看到正确的路线路径，也许这只是您帖子中的一个错字。）

【讨论】：

感谢您的回答，非常感谢。是的，我在Books.vue 组件中也添加了<router-view>，但是当我单击图书项目时，它会同时显示图书列表和图书详细信息。有什么解决办法吗？
不客气。是的，我回答的第二部分，因为这意味着你并不真正想要一个嵌套路线，它是同时显示两者。在这种情况下，还要从 Books.vue 中删除 <router-view>。
好吧，我想我可以这样做。