javascript - 如何解决Vue中URL查询参数传递时的特殊字符转义问题？

Question

单点登录操作流程：客户单通过携带值得url路径跳转,白名单界面通过url中得id,key请求后端数据渲染界面。
浏览器URL中输入
http://localhost:8088/taxBureauLogin?id=1206&key=zE9+TICzsrej...

浏览器转义为 http://localhost:8088/taxBureauLoginid=1206&key=zE9%20TICzsre...

前端vue在界面created函数里面获取 key值传给后端，
let searchParams = new URLSearchParams(window.location.search);

但是获取得searchParams得key传给后端拿到后变成了
原字符：zE9+TICzsrejfujj/BXjCQ== 拿到后:zE9 TICzsrejfujj/BXjCQ==

！！！特殊字符被转义 + 变成了空格 ，360浏览器中/ 也被转义，
期望得到浏览器中输入得原格式！大佬们给个招！
不考虑正则因为不确定要传过来有没有空格

Answer 1

你遇到的问题是由于 URL 中的特殊字符在传递过程中被转义了。特别是 + 号被转义成了空格。为了避免这种情况，你可以在前端对这些特殊字符进行编码和解码。
在 Vue.js 中，你可以使用 encodeURIComponent 和 decodeURIComponent 来处理这些特殊字符。以下是一个示例：

1. 编码 URL 参数： 在生成 URL 时，使用 encodeURIComponent 对 key 进行编码。
   JavaScript代码
   let key = "zE9+TICzsrejfujj/BXjCQ==";
   let encodedKey = encodeURIComponent(key);
   let url = http://localhost:8088/taxBureauLogin?id=1206&key=${encodedKey};
2. 解码 URL 参数： 在 Vue.js 中获取参数时，使用 decodeURIComponent 对 key 进行解码。

JavaScript代码

let searchParams = new URLSearchParams(window.location.search);
let key = searchParams.get('key');
let decodedKey = decodeURIComponent(key);

这样可以确保在传递过程中，特殊字符不会被错误地转义。

Answer 2

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchPar...

Answer 3

const u1 = new URL('https://example.com?key=1+1'),
    u2 = new URL('https://exmaple.com?key=1%2b1')

console.log(u1.searchParams.get('key')) // 1 1
console.log(u2.searchParams.get('key')) // 1+1