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

Question

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.

Answer 1

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.