企业官网建设流程全解析

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: '<div>User</div>' } const router = new VueRouter({ routes: [ // 动态段以冒号 : 开头 { path: '/user/:id', component: User } ] })

此时/user/foo与/user/bar这样的 URL 都会匹配到同一条路由。

动态段由冒号:标识。路由一旦匹配成功，动态段的值会以$route.params的形式暴露给所有组件。因此，把User的模板改写成下面这样，即可渲染出当前的用户 ID：

const User = { template: '<div>User {{ $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的对应字段。官方文档给出的对照表如下：

需要特别注意的是：$route.params中的值永远是字符串（即使 URL 中写的是数字，如post_id: '123'）。如果需要数字类型，请在组件内自行转换。这是 path-to-regexp 捕获组结果的固有特性，src/create-matcher.js 中直接透传了m[i]的字符串形式。

三、$route 对象：params、query 与 hash

除了$route.params，$route对象还暴露其他实用信息：$route.query（URL 中存在查询串时）、$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-existing'

pathMatch的命名在源码中有两处体现：

• 匹配方向：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-regexp（v1.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' } ] })

各模式的语义速览：

使用自定义正则模式时注意两点：

1. 不满足正则的 URL 不会命中该路由，会继续向后匹配其他路由；如果所有路由都未命中，则落到{ path: '*' }（若无则渲染空视图）；
2. 正则中的反斜杠需在 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