How do I pass parameters with router.push in vue.js?

Question

I'm working on a vue.js application. I'm trying to pass parameters in a redirect from one component to another like this:

      this.$router.push({
        path: '/my-path',
        query: {
          anArray: [...]
        }
      });

Once the component at my-path loads, I'm able to retrieve the parameters like this:

const theArray = this.$route.query.anArray;

The problem is that as soon as I refresh the page, the parameters are gone. When I open Chrome DevTools and put a break point where I retrieve the array from $route.query, I see this:

0: "[object Object]"
1: "[object Object]"
2: "[object Object]"

It seems obvious that it's getting this from the url which is:

http://localhost:8080/my-path?anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D

It doesn't seem to realize the 'object' terms in the url are just encodings of actual objects, which are available from $route.query the first time it loads.

Is there another way to pass parameters to a component using $router.push() such that the parameters persist on the page even after refreshing?

I could just try:

this.$router.push('/my-path?anArray=[...]');

...but my goal is to hide the parameters from the user (so don't show them in the url). This is another reason I'm looking for an alternate way of passing parameters (it doesn't even hide them).

I also tried:

      this.$router.push({
        path: '/my-path',
        params: {
          anArray: [...]
        }
      });

...but this made the parameters unavailable in the component (I wonder if this has anything to do with our global router which routes '/my-path' to the MyPath component without specifying parameters; is it wiping out the parameters?).

Thanks.

Why don't you use localStorage to store the query parameters?... and after the refresh retrive them — nachodd
– nachodd, Commented Jul 10, 2020 at 0:04
The params are only valid for named routes, not paths. If you init your /my-path route with a name, you could pass params. — tony19
– tony19, Commented Jul 10, 2020 at 3:33
I mean configuring your routes. The route config for /my-path should have a name prop, which you'd use when pushing the route. See router.vuejs.org/guide/essentials/named-routes.html — tony19
– tony19, Commented Jul 10, 2020 at 5:14
Ah, so I tried that and it works. I can now access this.$route.prams. However, it doesn't solve the larger problem. I still lose the parameters when I refresh the page. Would you suggest nachodd's solution of using localStorage? — gib65
– gib65, Commented Jul 10, 2020 at 11:46

elC0mpa · Accepted Answer · 2020-07-11 23:35:41Z

9

If you want to hide the parameters from the user, you must not use query. Instead, you should use parameters. Here I let you an example:

//routes.js
path: '/:data',
name: 'Home',
component: () => import('pages/YourPage.vue')

//Passing parameters
this.$router.push({
      name: 'Home',
      params: { data: yourData}
    });

//Receiving parameters in Home component
created() {
    console.log('Params: ', this.$route.params);
}

I hope this could be usefull

answered Jul 11, 2020 at 23:35

elC0mpa

1365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Over a year ago

This answer put me on the right track, but it is missing valuable info: Note: params are ignored if a path is provided, hope this helps people stumbling upon this answer.

Ryo Shiina Over a year ago

Thanks a lot Andy. Your 4 year old answer still helped me just now.

A-Tech · Accepted Answer · 2024-01-27 12:30:19Z

While params suggested @elC0mpa is a correct answer here are some alternatives depending on the use case:

localStorage/SessionStorage

Save the paramters into localStorage/SessionStorage and retrieve them in the loading sequence of your destination-page as @nachodd pointed out.

⚠ It should be noted that only key value pairs in form of strings are being saved into these storages. You will need something along the line of

localStorage.setItem(itemKey,JSON.stringify(itemValue))

to set the values and

const itemValue = JSON.parse(localStorage.getItem(itemKey))

to recive it. Also localStorage.removeItem(itemKey) for cleanup.

vuex store

You may want to consider saving your data in the store all together and access it from any vue-component. The commands needed are this.$store.commit('pathToStore/setterForKey',value) to save something into the store and this.$store.getters[pathToStore/getterForKey'] to receive the items value.

⚠ It should be noted that you need to set up the store accordingly with every state setter/mutation, getter and action. See this documentation.

Collectives™ on Stack Overflow

How do I pass parameters with router.push in vue.js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related