前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载本文围绕 Vue RouterVue 2 官方路由即当前仓库 vue-router中redirect与alias两个核心路由配置项展开完整讲解重定向与别名的三种配置形态字符串、命名路由对象、函数、与嵌套路由/参数/守卫的协作方式并结合 src/create-matcher.js 与 src/create-route-map.js 的源码揭示其底层匹配机制。读完本文你将能在实际项目中熟练运用 redirect 与 alias 处理 URL 跳转、兼容旧链接、解耦路由嵌套结构并理解二者在匹配链路中的本质区别。一、Redirect 重定向URL 被替换组件来自目标路由重定向Redirect的含义是当用户访问/a时URL 会被替换为/b并渲染/b所对应的路由组件。也就是说地址栏最终停留在/b页面内容也完全由/b的组件决定/a本身不承担任何渲染职责。这一行为与 Alias下文详述形成鲜明对比。重定向在路由配置routes中声明共有三种写法。1.1 字符串路径重定向最基础的用法是直接把目标路径以字符串形式写入redirectconst router new VueRouter({ routes: [ { path: /a, redirect: /b } ] })当访问/a时路由器会发起一次针对/b的重新匹配re-match最终地址栏与渲染内容均为/b。1.2 命名路由重定向如果目标路由已通过name命名可以用对象形式{ name: foo }指向它而无需关心其实际路径const router new VueRouter({ routes: [ { path: /a, redirect: { name: foo } } ] })1.3 函数形式动态重定向当重定向目标需要根据当前访问信息动态决定时redirect可以是一个函数该函数接收**目标路由to**作为参数并返回重定向的路径或 location 对象const router new VueRouter({ routes: [ { path: /a, redirect: to { // 函数接收目标路由作为参数 // 在这里返回重定向路径/location return /b }} ] })在 examples/redirect/app.js 中有一个完整且可直接运行的真实示例展示了函数形式在生产场景下的强大能力它可以同时读取to上的hash、params、query并分别返回路径、命名路由或带查询参数的对象{ path: /dynamic-redirect/:id?, redirect: to { const { hash, params, query } to if (query.to foo) { return { path: /foo, query: null } // 显式清空 query } if (hash #baz) { return { name: baz, hash: } // 重定向到命名路由并清空 hash } if (params.id) { return /with-params/:id // 原样透传参数 } else { return /bar } } }从类型定义看redirect的完整签名是RedirectOption RawLocation | ((to: Route) RawLocation)见 types/router.d.ts即返回值可以是任意合法的 location 描述路径字符串、{ path }、{ name }、{ name, params, query, hash }等。1.4 重定向与导航守卫的相互作用重要注意事项原文档补充了一条非常容易被忽略的规则导航守卫不会作用于发生重定向的那条路由只会作用于重定向的目标路由。例如下面的配置中给/a添加的beforeEnter守卫不会生效const router new VueRouter({ routes: [ { path: /a, beforeEnter: (to, from, next) { /* 该守卫不会执行 */ }, redirect: /b } ] })原因是守卫的注册与执行都绑定在最终被匹配的matched记录上而/a一旦命中redirect即被丢弃匹配链上只剩下/b。完整说明可参考 docs/guide/essentials/redirect-and-alias.md 及导航守卫主题文档 docs/guide/advanced/navigation-guards.md。1.5 进阶场景相对重定向、带参数重定向与兜底重定向同一个示例文件 examples/redirect/app.js 还演示了多种进阶组合相对路径重定向在嵌套路由中redirect: foo表示重定向到当前父路由下的兄弟路由/foo注意这里省略了前导/是相对于父级路径解析的{ path: /, component: Home, children: [ { path: foo, component: Foo }, { path: relative-redirect, redirect: foo } // 相对重定向到 /foo ] }带参数重定向重定向路径中可保留动态段占位符参数会自动透传// /redirect-with-params/123 会重定向到 /with-params/123 { path: /redirect-with-params/:id, redirect: /with-params/:id }兜底重定向catch-all与通配符路径*配合把未匹配到的所有 URL 统一送回首页{ path: *, redirect: / }二、Alias 别名URL 保持不变组件来自被别名路由别名Alias与重定向的关键区别在于将/a的别名设为/b后用户访问/b时 URL 依然停留在/b但匹配到的却是/a的组件。换言之URL 地址与渲染内容“解耦”——同一个组件可以同时挂在多条 URL 下且地址栏不会被改写。基础配置如下const router new VueRouter({ routes: [ { path: /a, component: A, alias: /b } ] })原文档指出别名带来的核心价值“别名让你可以把一套 UI 结构映射到任意 URL而不受路由配置嵌套结构的约束。”例如一个位于深层嵌套中的组件通过别名可以在顶层路径直接访问无需为了 URL 美观而重构整个路由树。2.1 别名的完整形态来自示例仓库examples/route-alias/app.js 覆盖了别名的全部配置形态包括绝对别名、相对别名、多别名、空字符串别名与嵌套别名const router new VueRouter({ mode: history, routes: [ // 顶级路由别名/root-alias 渲染 /root { path: /root, component: Root, alias: /root-alias }, { path: /home, component: Home, children: [ // 绝对别名/foo 渲染 /home/foo { path: foo, component: Foo, alias: /foo }, // 相对别名解析为 /home/bar-alias { path: bar, component: Bar, alias: bar-alias }, // 多别名数组形式/baz 与 /home/baz-alias 都渲染 /home/baz { path: baz, component: Baz, alias: [/baz, baz-alias] }, // 空字符串别名让 /home 直接渲染默认子路由 /home/default { path: default, component: Default, alias: }, // 嵌套别名/home/nested-alias/foo 渲染 /home/nested/foo { path: nested, component: Nested, alias: nested-alias, children: [ { path: foo, component: NestedFoo } ] } ] } ] })关键点总结绝对别名以/开头与父级路径无关相对别名不以/开头自动拼接父级路径多别名alias支持数组对应类型定义alias?: string | string[]见 types/router.d.ts空字符串别名可用于让父路径命中默认子路由嵌套别名子路由的别名会与父级别名的层级关系一并解析保证深层次 URL 也能访问到嵌套组件。三、源码剖析redirect 与 alias 在匹配链路中的真实执行3.1 记录构建阶段create-route-map.js在 src/create-route-map.js 的addRouteRecord中每个路由记录RouteRecord会分别存储redirect、alias与matchAs三个关键字段const record: RouteRecord { path: normalizedPath, regex: compileRouteRegex(normalizedPath, pathToRegexpOptions), components: route.components || { default: route.component }, alias: route.alias ? typeof route.alias string ? [route.alias] : route.alias : [], ... matchAs, redirect: route.redirect, ... }从中可以看到两个实现细节alias被统一规范化为数组后续按数组逐项展开别名在构建期会额外生成一条“别名路由记录”将alias作为新的path递归调用addRouteRecord并把原始路由的path作为matchAs传入见 src/create-route-map.js。matchAs就是别名记录与原始记录之间的“纽带”。此外该文件还对开发环境做了防御性校验若某个alias与path完全相同会发出警告并跳过该别名通配符路由*会被强制移动到pathList末尾保证它最后参与匹配这也是上面“兜底重定向”能稳定生效的前提。3.2 匹配执行阶段create-matcher.js在 src/create-matcher.js 中match命中某条记录后统一进入_createRoute其调度逻辑非常清晰function _createRoute (record, location, redirectedFrom) { if (record record.redirect) { return redirect(record, redirectedFrom || location) } if (record record.matchAs) { return alias(record, location, record.matchAs) } return createRoute(record, location, redirectedFrom, router) }redirect 的执行流程对应redirect()函数src/create-matcher.js若redirect是函数先以“由当前记录构造的 Route 对象”为参数调用它得到实际的重定向目标若结果为字符串包装为{ path: redirect }query / hash / params 的继承策略重定向返回对象中显式声明的query、hash、params优先未声明的则从原 location 继承query re.hasOwnProperty(query) ? re.query : query若目标是name在nameMap中查找并以{ name, query, hash, params }重新匹配若目标是path先调用resolveRecordPath解析相对路径相对父级路径再用fillParams填充:params占位符最后带着继承来的 query/hash 重新匹配。这正是示例中/redirect-with-params/123 → /with-params/123能自动透传参数、以及相对重定向foo能正确解析为父级下/foo的底层原因。alias 的执行流程对应alias()函数src/create-matcher.js用fillParams(matchAs, location.params, ...)把别名路径还原成原始路径含参数填充以该原始路径重新match取匹配结果matched数组的最后一条记录嵌套结构中的最深组件作为实际渲染记录但保留用户访问时的location即地址栏仍显示别名 URL。这从源码层面印证了别名“URL 不变、渲染原始组件”的语义matchAs让别名记录指回原始记录而_createRoute返回的 location 仍是访问时的地址。3.3 动态新增路由时的别名同步值得注意的细节createMatcher暴露的addRoute动态添加路由在处理“父路由带别名”的场景时会同步为别名路径也挂上子路由确保动态注册的路由在别名 URL 下同样可用见 src/create-matcher.js。这一行为在单元测试 test/unit/specs/create-matcher.spec.js 中亦有覆盖例如matcher.addRoute({ path: /c, name: c, alias: [/a, /d], component })的多别名注册用例。四、Redirect 与 Alias 对比速查维度Redirect 重定向Alias 别名地址栏 URL被替换为目标路径保持别名 URL 不变渲染内容目标路由的组件被别名路由的组件配置位置redirect字段alias字段取值类型字符串 /{ name }/ 函数字符串 / 字符串数组典型场景旧链接迁移、路径收敛、兜底 404同一组件挂多 URL、打破嵌套路径限制参数透传自动继承原 location 的 query/hash/params通过matchAs回填原始路径参数守卫生效位置只作用于目标路由作用于被别名的原始路由五、工程实践建议旧地址迁移网站改版后用{ path: /old, redirect: /new }保持旧链接可用必要时配合函数形式按 query/hash 分流移动端与桌面端复用同一套页面结构通过别名暴露给不同入口 URL避免复制组件与嵌套配置404 兜底使用{ path: *, redirect: / }或重定向到专门的 NotFound 页面警惕守卫失效凡是被重定向的路由其beforeEnter等守卫不会执行校验逻辑应写在目标路由上避免别名与路径同名开发模式下若alias与path相同会触发告警并被忽略详见 src/create-route-map.js。六、延伸阅读完整可运行的 redirect 示例examples/redirect/app.js完整可运行的 alias 示例examples/route-alias/app.js匹配器与重定向/别名核心实现src/create-matcher.js路由记录构建与别名展开src/create-route-map.js类型定义RedirectOption、aliastypes/router.d.ts相关单元测试test/unit/specs/create-matcher.spec.js英文原版指南docs/guide/essentials/redirect-and-alias.md赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐MyOne-iOS核心功能全解析首页、阅读、问答模块一网打尽MyOne iOS核心功能全解析首页、阅读、问答模块一网打尽 MyOne iOS是一款优雅的iOS客户端应用完美复刻了《一个》官方应用的核心体验。这款应用为前端路由Vue Router 路由重定向与别名使用指南Vue Router 路由重定向与别名使用指南 概念解析 在单页应用开发中路由管理是核心功能之一。Vue Router 提供了强大的路由控制能力其中重定向前端路由Vue Router 路由重定向与别名详解Vue Router 路由重定向与别名详解 前言 在单页应用开发中路由管理是核心功能之一。Vue Router 作为 Vue.js 官方的路由管理器提供了强前端路由创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考