Question

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

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编码。

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

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

2 个答案: