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

Question

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

url?param[key]=value

我需要这些类型的查询参数来匹配现有的后端基础结构，因此重命名/重构它们不是一种选择。

我尝试使用如下所示的路由器链接，但param对象只是被序列化为%5Bobject%20Object%5D.也许有一个选项可以更改此对象在 vue-router 中的序列化方式？

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

有人有有用的意见吗？谢谢:)

Answer 1

在花了一些时间 vue-router GitHub 问题和他们的文档后，我想通了。

创建路由配置时，导入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) : '';
}
});

而路由内的查询参数会自动转换为URL字符串，并在访问$router.query时解析为对象。