Pass an object as param to router.push (vue-router@4.05)

Question

Problem

router.push({name:"Order", params: {obj: {}}) fails to push obj: {}, instead the route receives obj: '[object Object]'

Situation

I have a route setup like this

{
    path: '/Order',
    name: 'Order',
    component: () => import("../views/Order.vue"),
    props: route => {
      return route.params.obj //  '[object Object]'
    },
 }

this results in props not being defined in Order.vue

Expected Result

{
    ...
    props: route => {
      return route.params.obj //  '{}'
    },
}

Based on this answer objects work in older versions

What I've tested

I've used jest to inspect the arguments passed to router.push and they appear as they should: {name:"Order", params: {obj: {}}

Any Ideas?

Route params are strings in the URL (ie `/route/:param`). How do you expect this to serialise `{}` to a string? — Phil, Mar 30 '21 at 04:12
I thought the same thing, but [this](https://stackoverflow.com/questions/50506470/) seems to indicate that you can pass objects as params — Shane Abram Mendez, Mar 30 '21 at 04:30
Because it was possible, I want to know if it still is. Thanks for the github issue — Shane Abram Mendez, Mar 30 '21 at 08:48
Deprecated since [vue-router@4.1.4](https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22) (2022-08-22) — Rohim Chou, Oct 25 '22 at 05:35

Michal Levý · Accepted Answer · 2022-03-11T17:07:00.287

Passing objects to params was never supported in Vue-router

It sort of worked in Router v3 with $router.push - the target component received the object. BUT as soon as user started using browser navigation (Back button) OR copy/pasting URL's, this solution was broken (you can try it here - just click the button and then use back and forward controls of the frame)

As a rule of thumb - if you want to pass anything to the target route/component, such data must be defined as parameters in the route definition so it can be included directly in the URL. Alternatives are passing data in a store, query params (objects needs to be serialized with JSON.stringify), or using the history state.

This was true for Vue-router v3 and is still for Vue-router v4

Note

Just to explain alternatives. By "store" I do not mean just Vuex. I understand Vuex can be overkill for some small applications. I personally prefer Pinia over existing Vuex. And you can create global state solution yourself with composition API very easily...

Pass an object as param to router.push (vue-router@4.05)

Problem

Situation

Expected Result

What I've tested

1 Answers1

Linked