Pass a entire object in $router.push method

Question

I am trying to use the $router.push method to pass data from one view to another. Here is some part of the code:

let obj = {
    foo: 'f1',
    foo2: ['f2'],
    foo3: {
        foo4: [],
        foo5: new Map(),
        foo6(){ ... }
    }
}

Push request at the router:

this.$router.push({
    name: 'foo',
    params: { id: this.id, data: this.obj }
})

the first parameter works because it is an integer, but the second returns the string: "[Object Object]"

Does the router support this kind of action? If so, how can I do this?

What would be the best strategy to do this kind of communication?

PS: I am detecting the state change of the router via watch

Does this answer your question? [vue-router@4.05 object params](https://stackoverflow.com/questions/66864658/vue-router4-05-object-params) — Michal Levý, Sep 05 '21 at 07:17
If you are trying to pass complex objects you might want to try [Vuex](https://vuex.vuejs.org/) — user11809641, Sep 05 '21 at 07:46
You can always serialize data to a string before passing. If you need complex objects like Map, use a serializer that supports them. It doesn't look like a good idea to make functions a part of the state though. — Estus Flask, Sep 05 '21 at 07:53

score 0 · Answer 1 · edited Aug 19 '22 at 06:40

// convert object in url string and then push in router.push method , as

// put data in URL object like this

const params = new URLSearchParams(
     {  
       location: 'Delhi',
       name: 'kartik',
       age: 20
     }
  );

//console.log(params.toString()) //the url string shown in url after path

router.push(book/?${params.toString()},undefined, { shallow: true }) // here book is page address and shallow true f not want to reload page

1 Answers1