How to pass custom objects in route queries

[mikinty]

I'm trying to do something very simple. I want to be able to pass an object through router-link. I searched all over the documentation and could not find a single example of router-link using the :to directive to pass objects, and the to documentation didn't talk about what the options were for this directive.

I ended up doing something like this, but I really wanted to avoid doing JSON encoding.

<router-link
  :to="{
    name: 'route',
    query: {
      status: JSON.stringify(object),
    },
  }"
>
  <span> {{ object.name }}</span>
</router-link>

It looks like from this stack overflow post that it may be possible to use an object directly, but I was not able to.

I also found another issue (#494) that mentioned that doing the JSON encoding is the only way to go. If this is the case, this needs to be documented as well.

TLDR:

1. Can we please have more examples of router-link in the documentation
2. Can we please document :to better?
3. If there are restrictions with passing objects, can we please mention that?
4. The API Documentation in Vue Router is extremely dense and to me at least, is not useful at all. E.g. what is this?

[wearypossum4770]

I would caution against placing stuff in the router unless you are attempting to pass the route data to the component as a prop. I saw a project using this technique and it is extremely sloppy, and hard to unit test. If you are trying to access data across the application it would be best to reach for state management. Currently they do recommend using Piñia. The testing (unit, tdd, bdd, etc...) will be much easier to read and maintain.

The answer to you question for 4 is the API Const RouterLink: _RouterLinI isn't the complete documentation. It gives you the basic information _RouterLink (I) for Interface so you would have to use the search box to pull the source documentation for it. check here for help with that _RouterLinkI.

Not sure I am qualified to answer you question, hope it helps.

[mikinty]

Yes so I'm asking about passing a static object in the params/query, not state. This should be something that is documented better, as query and params I found no documentation at all!

Let me know if there a place that is appropriate and I'm happy to help add documentation. I checked out _RouterLinkI and there was no help for query and params, which is extremely frustrating.

[posva]

I think you are looking for the options parseQuery and stringifyQuery: https://router.vuejs.org/api/interfaces/RouterOptions.html#parseQuery