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\'],
  templa         


        

Answer 1

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

demo: https://jsfiddle.net/jacobgoh101/mo57f0ny/1/

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"
        }
    }
})