CODEWITHSUNDEEP
vue.jsparametersrefreshrouter
gib65
gib65

Reputation: 2021

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

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.

Upvotes: 3

Views: 21916

Answers (2)

A-Tech
A-Tech

Reputation: 1101

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.

Upvotes: -2

elC0mpa
elC0mpa

Reputation: 126

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

Upvotes: 9

Related Questions