I haven’t found a good way to do this. Basically the props that you can pass as params, end up getting displayed in the url as resource or queries.

The above code makes the url look like “url/id/1”

What if i want to pass multiple props like “id” and " name" through router-link but don’t want the url to have the “name” field?

Hopefully, someone can answer this. Thank you.

  • im sorry i broke the code
    2·
    1 year ago

    You can use the .push() method of vueRouter to push a state.

    It is quite handy and, imo, better than the store solution:

    • if you want to just pass some data to another page, for example to pre-populate a form, you would create a store just as a middle-man instead of a way to store relevant data (for example, fetched data)
    • the push + state solution persist on page refresh, until you push a new state to the page or the user empty the cache, so depending on the use case it is preferable to the store

    Anyhow, it would look like this: button @click="router.push({name: 'settings', state: { ...myObj } })">Go to page

    to access it: route.history.state

    There is no need to stringify the object, so it’s quite handy. https://developer.mozilla.org/en-US/docs/Web/API/History https://router.vuejs.org/guide/essentials/navigation.html#History-Manipulation