Child route not showing in Vue-router

I’ve following object in Vue router.

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

Within Books.vue component, there’re <router-link> that upon clicking each; it should go to its detail view.

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

Similarly in App.vue I’ve following <router-view>.

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

When I click <router-link> the path gets updated but the respective BookDetail Page doesn’t show up.

It’s first time I am integrating routers within a project and couldn’t figured out how to solve it, even going in depth reading the documentation.

Answer

In Books.vue there needs to be an additional <router-view> to show the nested route component. Without it, you would get the behavior you describe.

Books.vue

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

Or if you didn’t want nested routing, define the detail page as a separate route:

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

(Note: There’s also a typo in the <router-link> (book instead of books) but since you were able to see the correct route path, maybe that’s just a typo in your post.)