Question

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

在我的路线中，我有：

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

这允许我访问de component中的dynamic prop。但是，我想做这样的事情：

{
    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路由器高级道具

1 个答案: