子路由未顯示在 Vue-router 中

Question

我在 Vue 路由器中關注了 object。

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

在Books.vue組件中，有<router-link>在單擊每個組件時； 它應該 go 到它的詳細視圖。

<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>來顯示嵌套的路由組件。 沒有它，你會得到你描述的行為。

書籍.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 ），但由於您能夠看到正確的路由路徑，也許這只是您帖子中的一個錯字。）