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
    },
]

我认为只有一个组件时，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/

See related discussion.

Answer 2

在组件中，您必须显式声明94.53，因为在路径对象中将props设置为true，路径的参数将被绑定到道具。

127.68

检查有关将道具传递给路径组件的文档。

Passing props to Route component

Answer 3

如果想要所有道具：

routes: [
    {
      path: '/',

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

      props: {
        default: true,
        foo: true
      }


    }
  ]

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

3 个答案: