前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载导读在 Vue Router 2 中**Route 对象路由对象**是描述当前激活路由状态的核心数据结构它承载了 URL 解析结果、动态路径参数、查询字符串、嵌套路由匹配记录等全部信息。无论是组件内的this.$route、导航守卫中的to/from还是scrollBehavior的入参本质都是同一个 Route 对象。本文以官方文档 docs-gitbook/de/api/route-object.md 为骨架结合仓库源码深入讲解 Route 对象的全部属性、它在各个使用场景中的形态以及不可变这一特性在底层是如何实现的。什么是 Route 对象Route 对象表示当前激活路由的状态。它包含两部分信息当前 URL 的解析结果路径、查询串、哈希与该 URL 匹配到的Route 记录route records即routes配置数组中定义的路径条目及其嵌套子条目。Route 对象是**不可变immutable**的——每一次成功的导航都会产生一个全新的 Route 对象旧对象不会被修改。这一点在官方文档中被明确强调也正是它能够被安全地用于守卫、Watcher 和滚动行为判断的前提。从源码看每次导航时路由历史管理类都会调用router.match()来生成新对象最终由createRoute构造并执行Object.freeze(route)完成冻结详见 src/util/route.js 与后文不可变性的源码实现一节。Route 对象出现在哪里官方文档列出了 Route 对象的五个典型获取位置它们传入的都是同一个数据形态1. 组件内this.$route在任意组件中直接通过this.$route访问。该属性由插件安装逻辑注入安装时通过Object.defineProperty在Vue.prototype上定义$route的 getter指向根实例的响应式_route属性见 src/install.js因此它既可在模板中读取也可被 watch。2.$routeWatcher 回调Route 对象的属性是只读且不可变的但可以被监听。例如watch: { $route(to, from) { // to 与 from 都是 Route 对象 console.log(to.fullPath) } }3.router.match(location)的返回值const route router.match(/foo/bar) console.log(route.path) // /foo/barrouter.match将原始位置字符串或 Location 对象规范化并匹配出 Route 对象其内部委托给 matcher 的match方法见 src/router.js 与 src/create-matcher.js。4. 导航守卫的前两个参数router.beforeEach((to, from, next) { // to 和 from 都是 Route 对象 next() })beforeEach、beforeResolve、afterEach以及组件内守卫beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave收到的前两个参数均为 Route 对象其中from就是上一次成功导航产生的旧 Route 对象。5.scrollBehavior函数的前两个参数const router new VueRouter({ scrollBehavior(to, from, savedPosition) { // to 和 from 都是 Route 对象 return savedPosition || { x: 0, y: 0 } } })通过to.fullPath、to.hash等属性可以决定每次导航后的滚动位置。Route 对象属性详解以下属性均为官方文档明确列出的公开属性德语版文档对应 docs-gitbook/de/api/route-object.md 第 33-89 行并与 types/router.d.ts 中的Route接口定义一一对应。$route.path类型string含义当前路由的路径始终以绝对路径形式输出例如/foo/bar。它来自匹配后 URL 的 pathname 部分。在createRoute中未提供路径时默认取/见 src/util/route.js。$route.params类型Object含义包含动态路径段/user/:id中的:id与星号段通配符*的键/值对对象若没有参数则为空对象{}。例如配置{ path: /user/:userId, component: User }当 URL 为/user/123时$route.params.userId为123。参数在匹配阶段被填充matchRoute会用path-to-regexp编译出的正则执行匹配并将捕获组decode()解码后写入params见 src/create-matcher.js。命名路由导航时还会把当前路由中已有的同名参数继承过来src/create-matcher.js。$route.query类型Object含义查询字符串的键/值对对象。例如路径/foo?user1则$route.query.user 1没有查询串时为空对象。注意createRoute在构造时会通过clone对location.query做一次深拷贝避免外部对象被共享修改src/util/route.js。查询值允许为字符串、字符串数组或null类型定义见 types/router.d.tsroute.spec.js单元测试也覆盖了null与嵌套对象查询值的比较场景见 test/unit/specs/route.spec.js。$route.hash类型string含义当前路由的哈希部分带前导#。例如 URL 为/foo#bar时值为#bar没有哈希时为空字符串。在createRoute中未提供时默认src/util/route.js。$route.fullPath类型string含义完整的解析后 URL包含查询串与哈希。它由getFullPath拼装而成(path || /) stringify(query) hashsrc/util/route.js。拼接查询串时默认使用内置的stringifyQuery也可以通过路由构造选项stringifyQuery提供自定义实现。典型值如/foo/bar?user1#section。$route.matched类型ArrayRouteRecord含义当前路由的所有嵌套路径段对应的 Route 记录数组按父级在前、子级在后的顺序排列。Route 记录是routes配置数组及其children数组中对象的内部副本而非原始配置对象本身。官方文档给出的嵌套路由示例const router new VueRouter({ routes: [ // 下面的对象就是一个 Route 记录 { path: /foo, component: Foo, children: [ // 这也是一个 Route 记录 { path: bar, component: Bar } ] } ] })当 URL 为/foo/bar时$route.matched是一个包含两个克隆对象的数组顺序为父级/foo在前、子级bar在后。在组件内可通过this.$route.matched拿到该数组常用于判断当前是否命中某条嵌套路径。从源码看formatMatch从最深的记录开始沿parent链回溯并unshift到数组头部从而保证父到子的顺序src/util/route.js而每个记录的真实结构在addRouteRecord中生成包含path、regex、components、instances、meta、parent、redirect、beforeEnter等内部字段见 src/create-route-map.js 与 types/router.d.ts。导航解析队列也是基于matched数组对比新旧记录来区分更新 / 激活 / 停用的见 src/history/base.js。$route.name类型string可选含义当前路由的名称若该路由配置了name才有值否则为undefined。详见仓库中的命名路由指南。const router new VueRouter({ routes: [ { path: /user/:userId, name: user, component: User } ] }) // 访问 /user/123 时 this.$route.name user$route.name同时服务于命名路由的反向解析router.push({ name: user, params: { userId: 123 } })会经由fillParams填充出路径/user/123src/create-matcher.js。仓库中的可运行示例见 examples/named-routes/app.js。补充属性$route.meta与$route.redirectedFrom德语版文档未列出、但英文版 API 文档docs/api/README.md与类型定义明确包含的两个属性$route.meta类型Object路由配置中meta字段的键/值集合未配置时为空对象。它由record.meta || {}派生src/util/route.js是在守卫中统一做登录鉴权、页面权限校验这一经典模式的基石。$route.redirectedFrom类型string若本次导航由重定向触发则保存被重定向来源 URL 的完整路径含查询与哈希无重定向时该属性不存在。它在createRoute中仅当传入redirectedFrom时才会写入src/util/route.js可用于在重定向后识别用户原本想访问的地址。类型定义为可选属性redirectedFrom?: stringtypes/router.d.ts。不可变性每一次导航都是全新的 Route 对象Route 对象不可变不是文档承诺而是由源码强制保证的。createRoute在返回前执行return Object.freeze(route)Object.freeze会阻止新增、删除属性以及修改属性值src/util/route.js。同时每次成功导航都会调用updateRoute用新对象替换history.current并触发_route响应式更新见 src/history/base.js 与 src/install.js因此旧的 Route 对象绝不会被原地修改任何历史引用如守卫闭包捕获的from都保持稳定对新导航的感知只能通过拿到新对象实现这正是监听$route/ 对比to与from这类写法的底层依据初始导航前历史记录使用START常量作为占位 RoutecreateRoute(null, { path: / })src/util/route.jsrouter.currentRoute在其就绪前即返回该对象src/router.js。此外query在构造时被深拷贝clone进一步杜绝了外部 Location 对象与 Route 对象共享引用的问题。相同路由的判定isSameRoute理解 Route 对象后一个自然的问题是如何判断两次导航是否指向同一条路由。仓库在 src/util/route.js 中提供了isSameRoute其比较逻辑可以作为属性语义的补充印证基于path匹配时忽略末尾斜杠差异并比较hash与query键排序后逐项比较支持嵌套对象与null值基于name匹配时额外比较params对应单元测试见 test/unit/specs/route.spec.js。导航到相同路由时历史层会直接以重复导航中止createNavigationDuplicatedError这也解释了为什么对同一 URL 反复push会收到导航失败结果——本质是 Route 对象比较的结果。小结与实践建议统一的数据形态组件、守卫、Watcher、scrollBehavior、router.match()返回值中出现的都是同一套 Route 对象掌握其属性即可在全部场景中读写路由状态。优先使用fullPath做日志与鉴权它包含路径、查询与哈希的完整信息适合作为导航日志或权限判定的依据。用matched处理嵌套路由元信息$route.matched从父到子排列配合meta可在守卫中自底向上聚合各层级路由的元数据。不要修改 Route 对象它是冻结的任何在路由对象上挂自定义字段的做法都会失败需要传递附加信息请使用meta或组件内状态。相关参考文档与源码英文版 Route 对象文档docs/api/README.mdRoute 对象构造与不可变实现src/util/route.js$route注入与响应式src/install.js路由匹配与参数填充src/create-matcher.js、src/create-route-map.jsRoute 类型定义types/router.d.ts命名路由用法docs-gitbook/de/essentials/named-routes.md赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐docker-compose-healthcheck 性能优化3个简单技巧大幅减少容器启动等待时间docker compose healthcheck 性能优化3个简单技巧大幅减少容器启动等待时间 docker compose healthcheck 是一前端路由vue-router 的 Route 对象完全指南属性详解、源码原理与实战应用vue router 的 Route 对象完全指南属性详解、源码原理与实战应用 Route 对象是 vue routerVue 2 官方路由库中描述当前前端路由Vue Router 2 的 Route 对象全解析属性、获取方式与源码实现Vue Router 2 的 Route 对象全解析属性、获取方式与源码实现 Route 对象路由对象是 Vue Router 中描述“当前激活路由状态”前端路由创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考