I have an object within the Vue router that specifies a path for books and their details.
{
path: "/books",
name: "books",
component: Books,
children: [
{
path: ":id",
name: "books.detail",
component: BookDetail,
}
]
}
Inside the Books.vue component, there are <router-link> elements that should navigate to each book's detail view when clicked.
<router-link :to="{ name: 'book.detail', params: { id: 5 }}">
<h2>Book Name</h2>
</router-link>
Similarly, in the App.vue file, I have included a <router-view>.
<div class="books">
<router-view></router-view>
</div>
When clicking on the <router-link>, the path updates but the corresponding BookDetail page does not display. This is my first time working with routers in a project and despite thorough reading of the documentation, I am unable to resolve this issue.