parseQuery 和 stringifyQuery 是 Vue Router 中成对使用的自定义函数:前者将 URL 查询字符串(如 id=123&name=张三)解析为 JS 对象,后者将 JS 对象序列化为查询字符串(不含?),二者必须配套使用以确保加密参数的正确加解密与路由参数完整性。

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 对象。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
为什么必须成对使用
这两个函数是强绑定关系:
- 如果你用自定义 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 缓存识别










