vue 中处理 URL 查询参数特殊字符转义
在单点登录场景中，URL 参数常包含用于身份验证的 id 和 key 等信息。 例如，URL 可能类似于 http://localhost:8088/taxbureaulogin?id=1206&key=ze9+ticzsrej…。 浏览器可能会对其中的特殊字符进行转义，例如 + 变为空格，/ 也可能被转义。 前端 Vue 应用需要正确处理这些特殊字符，以保证数据完整性。
通常，我们使用 URLSearchParams 获取 URL 查询参数：
let searchParams = new URLSearchParams(window.location.search);
然而，此方法获取的参数可能已进行浏览器转义。 例如，ze9+ticzsrejfujj/bxjcq== 可能变成 ze9 ticzsrejfujj/bxjcq==。
解决方法：
立即学习“前端免费学习笔记（深入）”；
-
后端处理 (推荐)： 后端在生成 Token 时，建议使用 base64url 编码，避免 +、/ 和 = 等特殊字符。这是最理想的解决方案，能从根本上解决问题。
-
前端处理 (如果后端无法修改)： 前端可以使用 encodeURIComponent 对获取到的 token 值进行编码，然后再传递给后端。 需要注意的是，Vue router 不同版本的行为有所不同：
-
Vue Router 3.x: Vue Router 3.x 会自动解码特殊字符。 使用 location.href 获取的 URL 信息也是已转义的字符串。 URLSearchParams 获取到的参数也已经解码。 因此，需要在传递给后端之前使用 encodeURIComponent 编码。
-
Vue Router 4.x: Vue Router 4.x 对 URL 参数的处理进行了优化，$route 属性中的参数编码更一致。 path 和 fullPath 中的值不再被解码，hash 会被解码。 在使用 push、resolve 和 replace 方法时，必须对路径进行编码。
以下代码演示了在 Vue Router 3.x 中使用 encodeURIComponent 的示例：
let searchParams = new URLSearchParams(window.location.search); let key = searchParams.get('key'); let encodedKey = encodeURIComponent(key); // 编码后传递给后端 -
-
利用 $route 属性 (Vue Router 4.x): 在 Vue Router 4.x 中，直接使用 $route 属性获取参数，无需额外编码。
总而言之，建议优先选择后端处理方法，以确保数据的完整性和安全性。 如果后端无法修改，则根据 Vue Router 版本选择合适的前端处理方法。
