Vue Router 2 动态路由匹配完全指南动态段、参数响应与高级匹配模式【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router导读在 Vue 2 应用中经常会遇到「一组 URL 共用同一个组件」的场景——例如所有用户的详情页都渲染同一个User组件只是 URL 中的用户 ID 不同。Vue Router本仓库为 Vue 2 官方路由器通过在路径中声明**动态段dynamic segment**来实现这种映射并自动将 URL 中的动态值注入到$route.params。读完本文你将掌握动态路由的声明方式、$route参数对象的读取、参数变化时的组件复用机制与响应方案、通配符 404 路由、基于 path-to-regexp 的高级匹配模式以及路由匹配的优先级规则。本文主体对应仓库文档 docs/kr/guide/essentials/dynamic-matching.md并结合源码src/create-route-map.js、src/create-matcher.js、src/util/route.js 等与示例examples/route-matching/app.js进行纵深展开。一、动态路由匹配的基本用法「把符合某个模式的路径映射到同一个组件」是动态路由的核心诉求。例如所有用户共享相同的布局但需要按不同的用户 ID 渲染const User { template: divUser/div } const router new VueRouter({ routes: [ // 动态段以冒号 : 开头 { path: /user/:id, component: User } ] })此时/user/foo与/user/bar这样的 URL 都会匹配到同一条路由。动态段由冒号:标识。路由一旦匹配成功动态段的值会以$route.params的形式暴露给所有组件。因此把User的模板改写成下面这样即可渲染出当前的用户 IDconst User { template: divUser {{ $route.params.id }}/div }从实现上看动态段的解析发生在路由匹配阶段src/create-route-map.js 中的compileRouteRegex会调用path-to-regexp的Regexp(path, [], pathToRegexpOptions)把路由路径编译成正则并记录所有参数 key随后 src/create-matcher.js 中的matchRoute在执行path.match(regex)后把捕获组逐个写入params通过decode解码最终由 src/util/route.js 的createRoute组装成包含params的完整路由对象。二、多个动态段与 $route.params 数据表同一条路由可以包含多个动态段它们会一一映射到$route.params的对应字段。官方文档给出的对照表如下模式pattern匹配路径matched path$route.params/user/:username/user/evan{ username: evan }/user/:username/post/:post_id/user/evan/post/123{ username: evan, post_id: 123 }需要特别注意的是$route.params中的值永远是字符串即使 URL 中写的是数字如post_id: 123。如果需要数字类型请在组件内自行转换。这是 path-to-regexp 捕获组结果的固有特性src/create-matcher.js 中直接透传了m[i]的字符串形式。三、$route 对象params、query 与 hash除了$route.params$route对象还暴露其他实用信息$route.queryURL 中存在查询串时、$route.hash等。完整的字段清单可参考 API 参考。结合 src/util/route.js 的源码一次匹配成功后createRoute会构造出如下结构的路由对象{ name: ..., // 命名的路由名 meta: ..., // 路由元信息 path: /user/foo, // 当前路径 hash: , // URL hash# 之后的部分 query: {}, // 查询参数? 之后解析出的对象 params: { id: foo }, // 动态段参数 fullPath: /user/foo, // path query hash 的完整拼接 matched: [...] // 匹配到的路由记录链含嵌套父路由 }值得注意的是createRoute返回的是Object.freeze(route)冻结对象即路由对象是只读的不应直接修改其中的params或query而应通过$router.push/$router.replace以声明新的目标位置的方式完成导航。四、响应参数变化组件复用、生命周期与两个解决方案使用带参数的路由时有一个必须注意的陷阱当用户从/user/foo导航到/user/bar时同一个组件实例会被复用。因为两条路由渲染的是同一个组件直接复用旧实例比销毁再重建新实例更高效但这同时意味着组件的生命周期钩子created、mounted 等不会被再次触发。这一行为在组件层有直接的源码依据src/components/view.js 中RouterView在渲染时通过depth找到匹配记录并通过prepatch钩子复用已挂载的实例——同一记录链上的组件切换只是原地更新不会走卸载/重建流程。那么如何在同一个组件实例内响应参数变化官方文档给出两种方案。方案一侦听$route对象const User { template: ..., watch: { $route (to, from) { // 响应路由变化…… } } }方案二使用beforeRouteUpdate守卫Vue Router 2.2 起引入const User { template: ..., beforeRouteUpdate (to, from, next) { // 响应路由变化…… // 别忘了调用 next() } }beforeRouteUpdate是组件内守卫之一仅在「复用同一组件实例、但路由发生更新」时触发语义比watch: $route更聚焦。它与beforeRouteLeave的区别离开导航在 src/composables/guards.js 中有清晰定义isUpdateNavigation要求目标与来源在匹配记录链上同源同一深度、同一批 record即判定为「更新」而非「离开」。完整的守卫机制可参考 导航守卫。五、通配符与 404 路由捕获所有未匹配路径普通的动态参数只会匹配被/分隔的单个 URL 片段。若想匹配「任意内容」可以使用星号*{ // 匹配一切路径 path: * } { // 匹配任何以 /user- 开头的路径 path: /user-* }使用星号路由时务必注意路由的排列顺序通配符路由应当放在所有具体路由的最后。{ path: * }通常用于客户端 404 页面如果使用 HTML5 History 模式还需要配合配置服务器见 history-mode.md否则刷新或直接访问深层路径会返回服务器 404。使用星号时会自动向$route.params注入一个名为pathMatch的参数它保存星号匹配到的 URL 剩余部分// 给定路由 { path: /user-* } this.$router.push(/user-admin) this.$route.params.pathMatch // admin // 给定路由 { path: * } this.$router.push(/non-existing) this.$route.params.pathMatch // /non-existingpathMatch的命名在源码中有两处体现匹配方向src/create-matcher.js 的matchRoute在捕获组写入参数时使用params[key.name || pathMatch]即当 path-to-regexp 未提供具名 key星号场景时自动落到pathMatch组装方向src/util/params.js 的fillParams在编译具名路由路径时会把params.pathMatch复制到索引0上以便Regexp.compile正确填充星号段对应 issue #2505 的修复。仓库中的单元测试也覆盖了这些行为例如 test/unit/specs/create-matcher.spec.js 中验证了「通过名称导航到通配符路由并携带pathMatch参数」以及「允许空的pathMatch」等场景。另一个容易被忽略的细节是通配符路由其实会被自动挪到末尾。src/create-route-map.js 在构建路由表后有一段显式逻辑将pathList中的*路由循环移动到列表尾部从而保证兜底语义不被中间定义的具体路由破坏。也就是说即使你在配置里把{ path: * }写在前面运行时它依然排在最后参与匹配。六、高级匹配模式基于 path-to-regexp 的完整能力Vue Router 的路由匹配引擎是 path-to-regexpv1.7.0因此在路由路径中可以放心使用它支持的各种高级模式可选动态段、0 个/1 个及以上匹配、自定义正则、可选分组等。仓库自带的 examples/route-matching/app.js 是一个可直接运行的完整示例覆盖了以下全部模式const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: / }, // 参数用冒号 : 表示 { path: /params/:foo/:bar }, // 参数可通过追加 ? 变为可选 { path: /optional-params/:foo? }, // 参数后可用圆括号跟随正则仅当 :id 全为数字时匹配 { path: /params-with-regex/:id(\\d) }, // 星号可以匹配任意内容 { path: /asterisk/* }, // 用圆括号包裹 ? 使路径的一部分成为可选 { path: /optional-group/(foo/)?bar } ] })各模式的语义速览模式写法含义匹配示例:foo?foo参数可选缺省时$route.params.foo为undefined/optional-params与/optional-params/foo都匹配:id(\\d)仅当id满足正则\d时匹配否则路由不命中/params-with-regex/123匹配/params-with-regex/abc不匹配*//*星号匹配剩余全部路径含斜杠/asterisk/foo、/asterisk/foo/bar(foo/)?bar用圆括号包裹的整段路径可选/optional-group/bar与/optional-group/foo/bar使用自定义正则模式时注意两点不满足正则的 URL 不会命中该路由会继续向后匹配其他路由如果所有路由都未命中则落到{ path: * }若无则渲染空视图正则中的反斜杠需在 JavaScript 字符串中写成\\d如示例所示避免转义失效。七、匹配优先级定义顺序即优先级当同一个 URL 同时命中多条路由时匹配优先级由路由定义的顺序决定越早定义的路由优先级越高。这一点在 src/create-matcher.js 中体现得很直接match函数按pathList即定义顺序逐条取出路由记录用matchRoute(record.regex, location.path, location.params)做正则测试第一个匹配成功即返回后续路由不再参与比较。所以具体路由如/user/:id应定义在通配路由*之前若两条路由都可能匹配同一 URL例如/user/:id与/user/me并存先定义的胜出实际行为取决于你的配置顺序。另外src/create-route-map.js 还暴露了两个与匹配行为直接相关的配置选项可用于调整匹配的松紧度caseSensitive路由级选项置为true时路径匹配区分大小写内部映射为 path-to-regexp 的sensitive选项pathToRegexpOptions路由级选项可传入 path-to-regexp 的选项对象例如strict: true关闭路径末尾斜杠的自动剔除见normalizePath对path.replace(/\/$/, )的处理逻辑。结语动态路由匹配是 Vue Router 2 日常开发中使用频率最高的能力之一从:id动态段与$route.params的读取到组件实例复用时用watch: $route或beforeRouteUpdate守卫响应参数变化再到通配符 404 兜底与 path-to-regexp 带来的可选参数、正则约束、可选分组等高级模式以及「定义顺序即优先级」的匹配规则——本文已结合仓库文档、源码与示例逐一展开。想要动手验证这些行为可以运行仓库中的 examples/route-matching/app.js 示例npm run dev后访问对应路由或阅读 test/unit/specs/create-matcher.spec.js 中的单元测试用例深入理解匹配器的边界行为。【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考