子路由未在 Vue-router 中显示

Question

我在 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 页面不会显示。

第一次在项目中集成路由器，一直没搞清楚怎么解决，仔细看了文档

Answer 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）但是由于您能够看到正确的路线路径，也许这只是一个拼写错误在你的 post.)

子路由未在 Vue-router 中显示

Child route not showing in Vue-router

javascript

nested-routes

vue.js

vue-router