自定义路由参数解析与实现方法

本文深入解析了 Vue Router 中自定义路由参数序列化与解析的核心机制，重点阐述了 `parseQuery` 和 `stringifyQuery` 这对必须协同工作的函数——它们不仅决定了查询参数在跳转时如何加密生成、在页面加载或刷新时如何精准解密还原，更直接关系到路由参数的安全性、完整性和可调试性；文章结合实际应用场景说明其触发时机，并推荐采用 AES-CBC + Base64 的可靠加解密方案，强调密钥与 IV 的稳定性、错误兜底处理以及“仅加密 value、保留 key 可读”的工程实践，为构建安全、健壮且易于维护的前端路由参数体系提供了清晰可行的技术路径。

parseQuery 和 stringifyQuery 是什么

它们是 Vue Router 创建路由实例时可配置的两个函数，分别控制 URL 查询参数（query）如何被“解析”和“序列化”。
stringifyQuery：把 JavaScript 对象（比如 { id: '123', name: '张三' }）转成 URL 中的查询字符串（如 id=123&name=%E5%BC%A0%E4%B8%89），但不加开头的 ?。
parseQuery：把 URL 地址栏中 ? 后面的字符串（如 id=123&name=%E5%BC%A0%E4%B8%89）还原成 JS 对象。

为什么必须成对使用

这两个函数是强绑定关系：
- 如果你用自定义 stringifyQuery 加密了参数，那浏览器地址栏里显示的就是密文（比如 data=U2FsdGVkX1%2B...）；
- 此时默认的 parseQuery 无法识别密文，会返回空对象或解析失败，导致页面拿不到原始参数；
- 所以必须提供配套的 parseQuery，在路由初始化、页面刷新、直接访问带参 URL 时，能正确解密还原。

它们在哪些时机生效

stringifyQuery 触发场景：
- 调用 this.$router.push({ path: '/user', query: { id: 1 } })
- 调用 router.push({ name: 'detail', query: { token: 'abc' } })
→ 每次生成跳转 URL 时都会调用它，把 query 对象转成加密后的查询字符串。

parseQuery 触发场景：
- 页面首次加载（含刷新）时，从当前 URL 的 location.search 解析参数
- 路由匹配过程中，对 path 字段中内嵌的查询串（如 /user?id=1）进行解析
→ 注意：它**不会**处理 push 或 replace 调用中传入的 query 对象，那些走的是 stringifyQuery 流程。

如何实现一个安全可用的加解密方案

推荐使用 AES-CBC + Base64 封装，密钥与 IV 需固定或可复现（避免每次随机导致无法解密）：
- 加密时：把整个 query 对象 JSON 序列化 → AES 加密 → Base64 编码 → 作为最终查询值
- 解密时：Base64 解码 → AES 解密 → JSON.parse 还原对象
- 错误兜底：解密失败时返回空对象，避免路由守卫或组件因 undefined 报错

示例要点：
- stringifyQuery 接收对象，返回字符串（如 data=SGVsbG8=）
- parseQuery 接收字符串（如 data=SGVsbG8=），提取 data 字段并解密，返回解密后的对象
- 不要加密整个 search 字符串，只加密 value，保持 key 可读（如 data=xxx 而非 q=xxx），便于调试和 CDN 缓存识别

到这里，我们也就讲完了《自定义路由参数解析与实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！