企业官网建设流程全解析

• 前端
• 路由

本文围绕 Vue Router（Vue 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 字符串路径重定向

最基础的用法是直接把目标路径以字符串形式写入redirect：

const 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, ... }

从中可以看到两个实现细节：

1. alias被统一规范化为数组，后续按数组逐项展开；
2. 别名在构建期会额外生成一条“别名路由记录”：将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）：

1. 若redirect是函数，先以“由当前记录构造的 Route 对象”为参数调用它，得到实际的重定向目标；
2. 若结果为字符串，包装为{ path: redirect }；
3. query / hash / params 的继承策略：重定向返回对象中显式声明的query、hash、params优先，未声明的则从原 location 继承（query = re.hasOwnProperty('query') ? re.query : query）；
4. 若目标是name，在nameMap中查找并以{ name, query, hash, params }重新匹配；
5. 若目标是path，先调用resolveRecordPath解析相对路径（相对父级路径），再用fillParams填充:params占位符，最后带着继承来的 query/hash 重新匹配。

这正是示例中/redirect-with-params/123 → /with-params/123能自动透传参数、以及相对重定向'foo'能正确解析为父级下/foo的底层原因。

alias 的执行流程（对应alias()函数，src/create-matcher.js）：

1. 用fillParams(matchAs, location.params, ...)把别名路径还原成原始路径（含参数填充）；
2. 以该原始路径重新match；
3. 取匹配结果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 对比速查

五、工程实践建议

• 旧地址迁移：网站改版后，用{ 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、alias）：types/router.d.ts
• 相关单元测试：test/unit/specs/create-matcher.spec.js
• 英文原版指南：docs/guide/essentials/redirect-and-alias.md

• 前端
• 路由