vue URL 显性显示query参数，不转义中括号[]

需求

http://localhost:8080/apollox/explore?stringTraits[Background][0]=Beige&stringTraits[Background][1]=Black&stringTraits[Body][0]=Black

将 路由中query参数按上面链接的形式正常显示在浏览器的URL中，[] 不可以显示为%5B。

探索过程

let params = {
    "stringTraits": {
        "Background": [
            "Beige",
            "Black"
        ],
        "Body": [
            "Black"
        ]
    }
}
this.$router.push({
	path:'/apollox/explore',
	query: params
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面的方法URL显示为：http://localhost:8080/apollox/explore?stringTraits=%5Bobject%20Object%5D
查阅了一下 VueRouter文档，发现初始化路由时有一个stringifyQuery参数可以配置

解决方法

上面的路由跳转代码不需要修改，只修改一下router.js

//首先引入qs
import qs from 'qs'
new VueRouter({
  //...routes，mode等其他参数配置,此处不多余显示
  stringifyQuery(query) {
    var result = qs.stringify(query, {arrayFormat:'indices', encode: false});
    return result ? ('?' + result) : '';
  }
})
1
2
3
4
5
6
7
8
9

此时URL就可以达到我们的需求了！！！

/*
* 补充：qs.stringify(需要格式化的数据，格式化配置参数)
* data 为需要格式化的源数据
* arrayFormat 指定数组编码格式
	* 默认值 indices: qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) //'a[0]=b&a[1]=c
	* brackets: qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) //'a[]=b&a[]=c'
	* repeat: qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })    //'a=b&a=c'
* encode 是否将[],{}转义为 %5B
*/
qs.stringify(data, {arrayFormat:'indices', encode: false})
1
2
3
4
5
6
7
8
9
10

我的个人博客有空来坐坐

https://www.wangyanan.online