javascript - 使用 vue-router 将查询绑定(bind)到 props

Question

是否可以以声明方式将查询值绑定(bind)到 props？

我希望 /my-foo?bar=my-bar 传递 Prop {foo: "my-foo", bar: "my-bar"} .

我目前正在使用这样的东西:

export default new Router({
  routes: [
    {
      path: "/:foo",
      name: "Foo",
      component: FooPage,
      props: route => ({ foo: route.params.foo, bar: route.query.bar})
    }
  ]
});

我正在寻找类似的东西:

export default new Router({
  routes: [
    {
      path: "/:foo?bar=:bar",
      name: "Foo",
      component: FooPage,
      props: true
    }
  ]
});

我正在使用 vue-router 2.3.1

Answer 1

我不明白您当前方法的问题；很好地解决了您的用例。

也就是说，您可以尝试 Object.assign ，像这样:

export default new Router({
  routes: [{
    path: "/:foo?bar=:bar",
    name: "Foo",
    component: FooPage,
    props: route => Object.assign({}, route.query, route.params)
  }]
})

...您还可以使用 object spread 尝试更现代的方法(如果你有 babel correctly configured )......

route => ({ ...route.query, ...route.params })

将 route.params 作为最后一个合并/展开项可以避免查询字符串覆盖路径参数。