vue-router 查询参数作为带键的数组

Question

我需要生成一个 vue-router link，其中包含一个以字符串键作为查询参数的数组。我希望结果 URL 看起来像

url?param[key]=value

我需要这些类型的查询参数来匹配现有的后端基础设施，因此 renaming/refactoring 它们不是一个选项。

我试过像下面这样使用路由器-link，但是 param 对象只是被序列化为 %5Bobject%20Object%5D。也许有一个选项可以改变这个对象在 vue-router 中的序列化方式？

<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>

有没有人提供有用的意见？谢谢:)

Answer 1

在花了一些时间 vue-router GitHub issues 和他们的文档之后，我弄明白了。

创建 RouteConfig 时，导入 qs 并设置 parseQuery 和 stringifyQuery 方法如下：

parseQuery: (query: any): object => {
    return qs.parse(query);
},
stringifyQuery(query: any): string {
    let result = qs.stringify(query, {encode: false});

    return result ? ('?' + result) : '';
}

包含 {encode: false} 很重要，否则方括号将得到 URL 编码。

Answer 2

除了马丁的评论，

确切的路由器配置应该是：

// https://github.com/ljharb/qs
import qs from 'qs';

const router = new Router({
    routes: [
        // ...
    ],
    // set custom query resolver
    parseQuery(query) {
        return qs.parse(query);
    },
    stringifyQuery(query) {
        var result = qs.stringify(query);

        return result ? ('?' + result) : '';
    }
});

并且在访问$router.query .

时，routes 中的查询参数将自动转换为url 字符串并解析为对象

vue-router 查询参数作为带键的数组

vue-router query parameter as array with keys

vue.js

vue-router

vuejs2