2

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
Mir Stephen
  • 1,758
  • 4
  • 23
  • 54

1 Answers1

1

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.)

Dan
  • 59,490
  • 13
  • 101
  • 110
  • Thank you for answering, I really appreciate it. Yes, I added `` in `Books.vue` component as well, but it shows books list and book detail concurrently when I click upon a book item. Any solution for this? – Mir Stephen Mar 08 '21 at 17:45
  • You're welcome. Yes, the 2nd half of my answer, because that means you don't really want a nested route, which is for showing both concurrently. In that case, also remove the `` from *Books.vue*. – Dan Mar 08 '21 at 17:45
  • Okay, I thought I can do it this way. – Mir Stephen Mar 08 '21 at 17:47