I am trying to pass data from one route to another. However, I need to pass an ID and title to the child route and use only the title in the URL but not the ID. I will use the ID to fetch data. I have read everywhere and I cannot think of a solution to my problem.

Example:

Let's say we are at route called "Library", where we have different books. When clicking on one of the books, I want to go to another route, which will display the book title in the URL and have the ID usable for data fetching. How can I do that?

I have found how to do dynamic URL matching, which I can use for the title display but then I cannot pass the ID:

<router-link :to="{path: '/Book/' + book.title}">

I have also found how to pass parameters using named routes but then how do I use the title in the URL?

<router-link :to="{name: 'Book', params: {title: book.title}}">

I am sure I am missing something here but I am not entirely sure what.

I am trying to pass data from one route to another. However, I need to pass an ID and title to the child route and use only the title in the URL but not the ID. I will use the ID to fetch data. I have read everywhere and I cannot think of a solution to my problem.

Example:

Let's say we are at route called "Library", where we have different books. When clicking on one of the books, I want to go to another route, which will display the book title in the URL and have the ID usable for data fetching. How can I do that?

I have found how to do dynamic URL matching, which I can use for the title display but then I cannot pass the ID:

<router-link :to="{path: '/Book/' + book.title}">

I have also found how to pass parameters using named routes but then how do I use the title in the URL?

<router-link :to="{name: 'Book', params: {title: book.title}}">

I am sure I am missing something here but I am not entirely sure what.

• javascript
• vue.js
• vue-router

2 Answers 2

You could use props:

router/index.js:

routes: [
  { path: '/Library/:title', name: 'Book', ponent: Book, props: true },
  ...
]

navigation:

:to="{ name: 'Book', params: { title: book.title }, props: { id: book.id } }"

Book.vue

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  }
}

Instead of props: true in router definition you can pass defaults, i.e:

..., props: { id: '1' }

Be weary of using title in url, it might need escaping. I know it's good for SEO, but ids are safer.

If you want to pass params and define them in the path, the easiest way is to set props:true

routes: [
  { path: '/Library/:title/:author', name: 'Book', ponent: Book, props: true },
  ...
]

then using router:

const router = useRouter()      
router.push({ name: 'Book', params: { title: book.title, author:book.author} })

in the ponent:

export default {
  props: {
    title: {
      type: String,
      required: true
    },
    author: {
      type: String,
      required: true
    },
  }
}

However if you want to pass data that were not defined as part of the path, since this release it is not possible via params, however you can find some alternatives here: https://github./vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 In summary:

1. Use store
2. Pass it in state: router.push({ name: 'somewhere', state: { myData } })
3. Pass it as a new property to to.meta during navigation guards