Vue路由器高级道具

crabbly

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

在我的路线中，我有：

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

这使我可以访问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组件中。

标准-

如文档中所写：

您可以创建一个返回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/ ]

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。