使用vue-router将查询绑定到props [英] Bind query to props with vue-router

问题描述

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

Is it possible to bind query values to props declaratively?

我想 / my-foo？bar = my-bar 传递道具 {foo：my-foo，bar：my-bar} 。

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

I'm currently using something like this:

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

我正在寻找类似的东西：

And I'm looking for something like:

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

我正在使用vue-router 2.3.1

I'm using vue-router 2.3.1

推荐答案

我不理解您当前的方法存在的问题;解决你的用例就好了。

I don't understand the problem with your current approach; solves your use case just fine.

那就是说，你可以试试 Object.assign ，如下所示：

That said, you could try Object.assign, something like this:

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

...你也可以尝试更现代的方法使用 对象传播 （如果你有 babel正确配置）...

... you can also try a more modern approach by using object spread (if you have babel correctly configured) ...

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

这篇关于使用vue-router将查询绑定到props的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！