vue-router：使用命名视图时将道具传递到组件中

Question

我在我的 vue-router 中使用 named views。在这两个组件内部，我需要获取道具。

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

第二个示例有效，因为只有一个组件：

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

我认为道具属性在只有一个组件的情况下才有效。

我没有在文档中找到解决方案，因此欢迎任何帮助。

Answer 1

由于在路由对象中将 props 设置为 true，因此必须在组件中显式声明 props，路由的参数绑定到 props。

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

// Breadcrumb component

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

在此处查看有关将 props 传递给 Route 组件的文档。

Passing props to Route component

Answer 2

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

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.

Answer 3

如果你想要所有的道具：

routes: [
    {
      path: '/',

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

      props: {
        default: true,
        foo: true
      }


    }
  ]

vue-router：使用命名视图时将道具传递到组件中

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

vue.js

vue-router