vue特殊字符怎么不转义

Posted 2023-04-18

参考技术A 将 路由中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
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
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
1
2
3
4
5
6
7
8
9
10

Vue Axios 查询字符串转义特殊字符

【中文标题】Vue Axios 查询字符串转义特殊字符

【英文标题】：Vue Axios query string escaping special characters

【发布时间】：2022-01-19 13:34:21

【问题描述】：

当字符串包含“+”或“&”符号时，我遇到了 Axios GET 查询字符串参数的问题。 我试过使用 encodeURIComponent ，我得到了

http://localhost:8001/api/data?page=1&paginate=20&term=S%2BM%20Company

当尝试查询作为值位于数据库表中的 S+M 公司时。 尝试只查询一个字符串而不对其进行编码会在

之后中断

http://localhost:8001/api/data?page=1&paginate=20&term=S+M.

字符串从纯文本字段添加到url，var是

url = url + &term=$this.search

任何建议将不胜感激。谢谢！

【参考方案1】：

有一个内置的帮助器：

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

像这样使用它：

const data = 
  queryOne: 'value1',
  queryTwo: 'value2'
;

const myParams = new URLSearchParams(data);
myParams.toString()