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 问题和他们的文档之后，我想通了。

在创建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 编码。