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 版本选择合适的前端处理方法。
