使用vue-router将查询绑定到props

Question

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

我想/my-foo?bar=my-bar传递道具{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)
  }]
})

...您还可以通过使用对象传播来尝试更现代的方法（如果您正确配置了 babel）...

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

其route.params作为最后的合并/有查询字符串覆盖路径参数传播项目避免。