Vue Router 不直接编码 URL，而是依赖浏览器 encodeURI 和 path-to-regexp 协同处理特殊字符；路由定义、跳转传参、匹配解码三者必须一致，否则导致 404 或参数错乱。
Vue Router 本身不直接“编码 URL”，而是依赖浏览器原生的 encodeURI / encodeURIComponent 行为和 path-to-regexp 的解析逻辑共同决定特殊字符能否被安全、准确地匹配。关键在于：路由定义时怎么写、跳转时怎么传、匹配时怎么解——三者必须协同，否则就会出现 404、参数丢失或解析错乱。
路由路径定义中的特殊字符需显式转义或避开
Vue Router 的 path 字符串（如 path: '/user/:id'）在内部由 path-to-regexp 编译为正则表达式。该库对非字母数字字符（如空格、中文、/、?、#、& 等）默认不支持直接出现在动态段中。
- 冒号后命名参数（
:id）只匹配[^\/#\?]+?类型的字符——即不包含斜杠、井号、问号；中文和空格虽能匹配，但需确保跳转时已正确编码，否则浏览器会截断 - 若路径含固定中文或符号（如
path: '/文章详情'），必须保证整个路径在定义时就是合法 URI 字符串，否则path-to-regexp编译失败或匹配失效 - 推荐做法：路径层级尽量用英文 slug（如
/article/123），语义化内容通过params或query传递，而非硬塞进 path
编程式导航中，params 和 query 的编码行为不同
使用 router.push({ name: 'xxx', params: {...}, query: {...} }) 时：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
params不参与 URL 编码——它只用于匹配path中的命名段，Vue Router 会在生成最终 URL 前自动调用encodeURIComponent处理每个参数值（例如{ id: '张三' }→/user/%E5%BC%A0%E4%B8%89） -
query由浏览器自动编码，但 Vue Router 会保留原始对象结构；若手动拼接 query 字符串（如?name=张三&type=1），极易因未编码导致解析失败或 XSS 风险 - 特别注意：空格会被编码为
%20，但某些旧环境可能误作+；建议统一用encodeURIComponent预处理再传入
服务端与 History 模式下，URL 解码需保持一致
启用 history 模式时，真实 URL（如 /user/%E5%BC%A0%E4%B8%89）由浏览器自动解码后交由 Vue Router 匹配。但若服务端（如 Nginx）未配置 fallback，直接访问该 URL 会 404——因为服务器试图找物理路径 /user/张三，而它并不存在。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：服务端将所有非静态资源请求重写到
index.html，让前端接管路由 - 同时确保后端接口接收参数时，也按相同规则解码（如 Node.js 的
decodeURIComponent），避免前后端解码差异导致数据错乱 - 对于含特殊字符的
params，Vue Router 匹配成功后，$route.params.id已是解码后的原始值（如"张三"），无需二次 decode
敏感参数不应放在 URL 中，无论是否编码
URL 会被浏览器历史、代理日志、CDN 缓存等明文记录，encode 只防误读，不防泄露。
- 密码、token、用户身份标识等，绝不能用
query或params传输 - 如确需隐藏，应走请求头（
Authorization）或后端 session，前端仅维护状态标识 - 所谓“URL 加密”（如用 crypto-js 封装 query）只是障眼法，无法替代真正的鉴权机制
