Vue Router 的路由匹配核心依赖 path-to-regexp 库，它将声明式路径（如 /user/:id）编译为带参数提取逻辑的安全正则表达式，并通过 keys 数组与 exec 结果协同解析 params；同时提供 parse 和 compile 支持路径双向操作，初始化时预编译，运行时高效匹配。
Vue Router 的路由匹配能力，核心依赖于 path-to-regexp 这个轻量但精密的路径解析库。它不直接写正则，而是把像 /user/:id 这样的声明式路径，编译成可执行、可复用的正则表达式，并附带参数提取逻辑——这才是真正支撑动态路由的底层引擎。
path-to-regexp 如何把路径变成正则？
调用 pathToRegexp('/user/:id') 时，库会做三件事：
- 词法分析：扫描字符串，识别出静态段（
/user）、命名参数（:id）、可选修饰符（如?、*、+）等 token - 模式生成：为每个参数生成默认捕获规则，比如
:id→([^/#?]+?)，确保不跨路径段、不吞掉查询或哈希部分 - 组装正则：拼接静态前缀、参数组、结尾锚点（
[/#?]?$），并添加全局/忽略大小写标志
结果不是简单替换，而是一个兼顾安全性（防路径穿越）、兼容性（支持 /user/123/ 和 /user/123?tab=info）的完整正则对象。
参数提取靠 keys 数组和 exec 结果协同完成
当你传入 keys = [] 第二个参数，pathToRegexp 会在解析过程中填充这个数组，记录每个参数名、前缀、匹配模式等元信息。匹配时 regexp.exec('/user/88') 返回的数组中：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 索引 0 是完整匹配路径（
'/user/88'） - 索引 1 开始是各捕获组内容（
'88'），顺序与keys中定义的参数一一对应 - Vue Router 正是靠这个位置关系，把值映射到
route.params.id
parse 和 compile 提供双向操作能力
parse('/post/:slug(\w+-\w+)') 返回结构化 token 列表，含字面量段和参数描述对象，便于调试或自定义解析逻辑；compile('/user/:id') 则返回一个函数，接收对象如 { id: 9527 }，输出编码后路径 /user/9527。两者配合，让路由既可匹配也可生成，构成完整的路径生命周期闭环。
Vue Router 实际调用链很简洁
在 Vue Router 初始化阶段，它遍历所有 routes 配置，对每条 path 字符串调用 pathToRegexp(path, keys)，缓存正则和 keys；导航触发时，用 regexp.exec(location.pathname) 尝试匹配，成功则用捕获值 + keys 元信息构造 params 对象。整个过程不涉及运行时重编译，性能开销极低。
