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

Question

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

我想让/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)
  }]
})

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

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

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

Answer 2

我不知道有任何声明性指令，但我喜欢Ricardos general approach。可能存在的问题是它无条件地将所有查询参数绑定为 prop，因此只需将其添加到 url 即可修改该组件的任何预定义 prop。

如果您想要一个过滤器并且仍然具有可重用性，您可以定义一个辅助函数并以不太冗长的方式绑定查询：

import bindQuery from "./router-query-bind";

export default new Router({
    routes: [{
        name: "Foo",
        path: "/:foo",
        props: bindQuery(["bar"]), // only binds 'bar' from query as a prop
        component: FooPage
    }, {
        name: "Bar",
        path: "/:bar",
        props: bindQuery(), // binds all query parameters as a props
        component: BarPage
    }]
});

使用如下实现。请注意，这是 TypeScript 并且具有类型注释。如果您需要纯 JavaScript，只需删除它们即可。

import { Route } from "vue-router";
type RoutePropsFunction = (route: Route) => Object;

/**
 * Creates a props-function for Vue-Router to pass all route parameters and query parameters as
 * props to the routed component.
 * You may filter the passed query parameters by name so that only the expected
 * props will be bound.
 * @param queryFilter List of query parameters which will be passed as props to the component.
 * This is optional. If not set all query parameters will be bound.
 */
export default function (queryFilter?: string[]): RoutePropsFunction {
    return function (route: Route) {
        const filtered = queryFilter ?
            queryFilter.reduce((a, b) => ({ ...a, [b]: route.query[b] }), {}) :
            route.query;
        return { ...route.params, ...filtered };
    }
}