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

【问题标题】：vue-router query parameter as array with keysvue-router 查询参数作为带有键的数组
【发布时间】：2019-01-24 21:15:21
【问题描述】：

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

url?param[key]=value

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

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

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

有没有人有帮助的意见？谢谢你:)

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案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 编码。

【讨论】：

不确定我们要导入什么，使用 import qs ?

【解决方案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时会自动转换为url字符串并解析为对象。

【讨论】：

您的示例中缺少编码错误：qs.stringify(query, {encode: false});