Vue 路由器高级道具

Question

我正在尝试自定义路由器传递给组件的 props 对象。

在我的路线中我有：

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: true
},

这允许我访问 de 组件内的 dynamic 属性。但是，我想做这样的事情：

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        custom: 'something_custom_for_this_route',
        dynamic: dynamic // the dynamic parameter from the route (:dynamic)
    }
},

我可以在哪里访问组件内的 trow 道具：custom 和 dynamic。 custom 道具在我的路线中定义，dynamic 道具是从路线 :dynamic.

中获取的值

这可能吗？感谢任何帮助。

在上面的示例中，我得到一个错误，因为 dynamic 没有在 props 对象中定义。

我也试过：

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        custom: 'something_custom_for_this_route',
    }
},

和

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        default: true,
        custom: 'something_custom_for_this_route',
    }
},

有了这些，我在组件内部得到 dynamic 作为 undefined。

Answer 1

如文档中所写：

You can create a function that returns props.

从而结合两种类型的参数：

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: function(route) {
      return Object.assign({}, route.params, {
        custom: 'something_custom_for_this_route'
      })
    }
}

[https://jsfiddle.net/uypveLhw/]

Vue 路由器高级道具

Vue router advanced props

vue.js

vue-router