Can I have multi id paths when using vue-router?

Question

Is it possible to have anything like this?

// router/index.js
const routes = [
  {
    path: '/books/:bookId/authors/:authorId',
    name: 'Author',
    props: true,
    component: () => import('@/views/AuthorView.vue')
  }
]

In AuthorView.vue I have a breadcrumbs component, and with those ids it would be really easy to populate it. I need them to be in the URL to allow users to copy and share URLs.

Edit #1

Here the link to official documentation.

Answer 1

The route declaration is correct you can access the Ids by using props in the Author component.

<script>    
export default {
    props :['bookId','authorId'],
};
</script>

Router-link to the page

<router-link :to="{ name: 'Author', params: { bookId:bookId,authorId: authorId }}"  class="btn btn-sm btn-primary" variant="primary">Edit</router-link>