vue.js - vue-router:使用命名 View 时将 Prop 传递到组件中

Question

我正在使用 named views在我的 vue-router 里面。在这两个组件中，我需要获取 Prop 。

以下代码显示了路由的定义。第一个条目不起作用。在组件内部， Prop 将保持未定义状态。所以 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

是的，您可以使用多个组件并将 props 传递给每个组件:

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.