Use the $router.push method to pass an entire object as a parameter

Question

I am attempting to utilize the $router.push method in order to transfer data from one view to another. Below is an excerpt of the code:

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

Requesting push at the router:

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

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

Does the router support this type of action? If so, how can I achieve this?

What approach would be the most effective for this type of communication?

PS: I am monitoring the router state change using watch

Answer 1

Answer №1

// changing an object into a URL string and then adding it to the router.push method is done like this

// creating a URL object with data like this

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

//console.log(params.toString()) //the resulting URL string

router.push(book/?${params.toString()},undefined, { shallow: true }) // in this example, 'book' is the page and 'shallow:true' prevents page reload

Answer 2

// changing an object into a URL string and then adding it to the router.push method is done like this

// creating a URL object with data like this

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

//console.log(params.toString()) //the resulting URL string

router.push(book/?${params.toString()},undefined, { shallow: true }) // in this example, 'book' is the page and 'shallow:true' prevents page reload