vue-router: Passing props into components, when using named views

7
votes

I am using named views inside my vue-router. Inside of both components I need to get the props.

The following codes shows the definition of the routes. The first entry is not working. Inside the component the props will stay undefined. So the Breadcrumb and the Collection component is getting no property

The second example works, because there is just one component:

const routes = [
    {
        path: '/:cid',
        name: 'collection',
        props: true,
        components: {
            default: Collection,
            breadcrumb: Breadcrumb
        }
    },
    {
        path: '/:cid/:iid',
        name: 'item',
        props: true,
        component: Item
    },
]

I think the the props property is just working, when there is just one component.

I didn't find a solution inside the documentation so any help is welcome.

3
vue.jsvue-router

3 Answers

24
votes

Yes, you can use multiple components and pass props to each one:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        foo: Foo
      },
      props: {
        default: { name: 'Home' },
        foo: { name: 'Foo' }
      }
    }
  ]
})

http://jsfiddle.net/jonataswalker/ykf0uv0d/

See related discussion.

2
votes

If you want all the props : 

routes: [
    {
      path: '/',

      components: {
        default: Home,
        foo: Foo
      },

      props: {
        default: true,
        foo: true
      }


    }
  ]
0
votes

In the components you have to explicitly declare the props because of setting props to true in the route object, the params of route are bound to props.

// Collection component
export default {
 props: ['cid'],
 template: ...,
}

// Breadcrumb component

export default {
 props: ['cid', 'iid'],
 template: ...,
}

Check documentation here about passing props to Route component.

Passing props to Route component