How to pass an object as props with vue router?

Question

I have the following fiddle https://jsfiddle.net/91vLms06/1/

const CreateComponent = Vue.component('create', {
  props: ['user', 'otherProp'],
  template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});

const ListComponent = Vue.component('List', {
  template: '<div>Listing</div>'
});

const app = new Vue({
  el: '#app',
  router: new VueRouter(),
  created: function () {
    const self = this;
        // ajax request returning the user
    const userData = {'name': 'username'}

    self.$router.addRoutes([
      { path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
      { path: '/list', name: 'list', component: ListComponent },
      { path: '*', redirect: '/list'}
    ]);
    self.$router.push({name: 'create'}); // ok result: User data: { "name": "username" }; other prop:
    self.$router.push({name: 'list'}); // ok result: Listing

    // first attempt
    self.$router.push({name: 'create', props: {otherProp: {"a":"b"}}}) // not ok result: User data: { "name": "username" }; other prop:
    self.$router.push({name: 'list'}); // ok result: Listing

    // second attempt
    self.$router.push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
  }
});

As you can see first I am passing to CreateComponent the user just when I initialize the route.

Later I need to pass another property otherProp and still keep the user parameter. When I try to do this the object I send is not passed to the component.

How can I pass the otherProp and still keep the user?

The real purpose of the otherProp is to fill a form with the data from it. In the listing part I have the object and when I click the "edit" button I want to populate the form with the data that comes from the listing.

Answer 1

It can work by using props's Function mode and params

Vue 2 demo: https://jsfiddle.net/hacg6ody/

when adding routes, use props's Function mode so that it has a default property user and it will add route.params as props.

{
    path: '/create',
    name: 'create',
    component: CreateComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

params passed in push will automatically be added to props.

self.$router.push({
    name: 'create',
    params: {
        otherProp: {
            "a": "b"
        }
    }
})

Answer 2

Here's my simple solution to send object using Router.

this.$router.push({
 name: 'someName'
 params: {
  obj: {...someObject}
 },
});

And if you want to use obj in the next page. You Can get data below.

this.$route.params.obj

Answer 3

I'm using the following setup in Vue Router 4 and Vue 3 and Composition API:

1. In the router, define your route like:

   {
     name: 'someroute',
     path: 'someroute?id=:id&name=:name`,
     component: [YourComponentNameHere],
     props: true,
   }
   

2. In the sender component:

   router.push('someroute',
     params: {
       id: 1,
       name: 'John'
     }
   })
   

3. In the receiver component, access them using:

   router.currentRoute.value.params.id
   router.currentRoute.value.params.name