Vue Router高级Props配置：自定义路由传递的Props对象

这问题我之前也碰到过，你直接写静态对象的方式行不通——静态props对象里没法直接引用路由的动态参数。不过Vue Router提供的函数模式props，完美适配这种既要自定义静态属性又要获取路由参数的场景。

具体实现方案 #

把路由配置里的props改成一个函数，这个函数会自动接收当前的route对象作为参数，你只需要在函数里返回一个合并后的对象：既包含自定义的静态属性，又从route.params里取出动态路由参数。

示例代码 #

{
  path: '/base/fixed/:dynamic',
  component: OfficeActions,
  props: (route) => ({
    custom: 'something_custom_for_this_route',
    dynamic: route.params.dynamic
  })
}

组件内接收props #

在OfficeActions组件里，像平常定义props一样声明这两个属性即可：

<script>
export default {
  props: ['custom', 'dynamic'],
  // 之后就能直接通过this.custom、this.dynamic访问对应值
}
</script>

额外拓展 #

如果之后需要添加更多路由参数、甚至查询参数（比如route.query里的内容），也可以在这个函数里一并处理后返回，灵活性拉满。比如要新增一个查询参数foo的传递：

props: (route) => ({
  custom: 'something_custom_for_this_route',
  dynamic: route.params.dynamic,
  foo: route.query.foo
})

内容的提问来源于stack exchange，提问作者crabbly