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.

  • Reinsch@feddit.de
    2·
    10 months ago

    We’ll why do you want this? If you want (in this context) “invisible” data shared with different components use a store or a composable. If you want parameters in your url that have an effect on the content that is displayed, use the router params. Mixing both requirements would let to 1. User enters URL with name and ID 2. A piece of code rewrites the url, memorizes the name and removes that info from the url. That’s a SEO nightmare.

    I guess the problem is a perspective problem: that’s no pollution, that’s a clear description of what the user will see. Also the user could copy the url, send it to a colleague and this colleague would see a different page if you want to “cleanup” the url.

    • pizzahoeOP
      2·
      10 months ago

      I understand that the cleanup thing is a bad idea. I had a really simple use case where i have a list of persons fetched from a database with their id, names and a link for each displayed using v-for. The link for each person is a router link which when clicked redirects to respective person/:id.

      I want to display some stuff on this new component but didn’t want to make the api call to fetch the person again from the database. This is why i wanted to pass the name as well in the props through the router link. But as you said maybe I should use pinia or some state management library for use cases like this?

      • Reinsch@feddit.de
        3·
        10 months ago

        Yep, definitely a job for pinia. But a second fetch doesn’t seem unreasonable as well. The “list page” fetches an API endpoint to get a basic list of users, the “detail page” fetches another API endpoint returning a single user with the detailed information. If you are worried if you are doing to much requests, you also may have a look on Nuxt. With the SSR functionality it will save you multiple requests made.

        • pizzahoeOP
          2·
          10 months ago

          I didn’t have much idea about these so was trying to use the router itself. I’ll look into nuxt and pinia and see which ones might be ideal for my use cases. Thanks a lot for answering!

  • im sorry i broke the code@sh.itjust.works
    2·
    9 months 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

  • pizzahoeOP
    1·
    10 months ago

    The code isn’t visible for some reason on lemmy. I’m not sure if it’ll be in this comment. Okay it wasn’t. Removing brackets to see if it works now.

    router-link :to=name “url”, params:id:1 router-link