vue-router:使用命名视图时将props传递给组件

Question

我在我的vue-router中使用命名视图.在两个组件内部,我需要获得道具.

以下代码显示了路由的定义.第一个条目不起作用.在组件内部,道具将保持未定义.所以Breadcrumb和Collection组件没有任何属性

第二个例子有效,因为只有一个组件:

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

我认为只有一个组件时,props属性才有效.

我没有在文档中找到解决方案,所以欢迎任何帮助.

Answer 1

是的,您可以使用多个组件并将道具传递给每个组件:

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/

见相关讨论.