企业官网建设流程全解析

• 前端
• 路由

导读

本指南围绕 Vue 2 官方路由库 vue-router 的meta（元信息）字段展开，讲解如何在路由配置中为任意路由附加自定义数据，并通过$route.matched在全局导航守卫中读取这些数据，实现登录鉴权、页面标题、过渡动画、面包屑等实战场景。读完本文，你将掌握meta的完整定义方式、路由记录（Route Record）与matched数组的底层匹配原理，以及一套可直接复用的导航守卫鉴权方案。

一、什么是路由 meta 字段

在开发中，我们经常需要给某条路由附加一些"与渲染无关、但与业务逻辑相关"的额外信息，例如：

• 该路由是否需要登录后才能访问（权限标记）；
• 该路由页面的标题或过渡动画名称（transition name）；
• 该路由所属的菜单分组、面包屑层级等元数据。

vue-router 提供了meta属性来承载这类任意信息。官方文档指出，meta接受一个对象，其中可以存放任意数量的自定义属性，并且该对象可以通过路由对象（route location）和导航守卫进行访问（见 docs-gitbook/es/advanced/meta.md 及英文版 docs/guide/advanced/meta.md）。

在路由配置中定义meta的语法如下：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // campo meta —— meta 字段 meta: { requiresAuth: true } } ] } ] })

从类型声明看，meta在RouteConfig中被声明为meta?: any，即它可以是任意类型（通常是对象），见 docs-gitbook/es/api/options.md。这意味着你完全可以按照业务需要自由设计 meta 内部的结构。

二、route record：meta 的真正宿主

要理解 meta 的读取方式，必须先引入一个核心概念——路由记录（Route Record）。

2.1 什么是路由记录

在routes配置数组中，每一个路由对象（route object）都会被编译成一个路由记录。路由记录之间可以嵌套：当路由配置里出现children时，子路由记录会以parent指针挂载到父路由记录之下。

这一点可以从源码得到直接印证。create-route-map.js 中的addRouteRecord函数负责把每个路由配置对象编译为RouteRecord，其中第 92-115 行构造了记录的核心字段：

const record: RouteRecord = { path: normalizedPath, regex: compileRouteRegex(normalizedPath, pathToRegexpOptions), components: route.components || { default: route.component }, alias: ..., instances: {}, enteredCbs: {}, name, parent, matchAs, redirect: route.redirect, beforeEnter: route.beforeEnter, meta: route.meta || {}, // ← meta 被原样存入路由记录 props: ... }

注意第 108 行的meta: route.meta || {}：当你没有定义meta时，路由记录会获得一个空对象{}作为兜底值，这保证了后续代码中访问record.meta.xxx永远不会因为meta为undefined而报错。同时，父路由与子路由各自拥有独立的meta对象，互不影响。

2.2 嵌套匹配：一条 URL 命中多个路由记录

由于路由记录可以嵌套，当一次导航发生时，匹配到的往往不止一个路由记录。例如上面/foo+bar的配置，访问 URL/foo/bar时：

• 父路由记录/foo被命中；
• 子路由记录bar也被命中。

所以"某条路由的 meta"严格来说应表述为"某条 URL 命中的一系列路由记录的 meta 集合"。这正是下一节$route.matched存在的原因。

三、$route.matched：读取 meta 的关键入口

3.1 matched 数组是什么

所有被当前 URL 命中的路由记录，都会按**从父到子（根记录在前、叶记录在后）**的顺序暴露在$route.matched数组中。$route.matched的类型是Array<RouteRecord>（见 docs-gitbook/es/api/route-object.md）。

以/foo/bar为例，$route.matched会是类似这样的结构：

$route.matched = [ { path: '/foo', meta: { ... } }, // 父记录（索引 0） { path: '/foo/bar', meta: { requiresAuth: true } } // 子记录（索引 1） ]

3.2 源码视角：matched 是如何构建的

$route.matched的构建逻辑位于 src/util/route.js 的createRoute与formatMatch中：

const route: Route = { name: location.name || (record && record.name), meta: (record && record.meta) || {}, path: location.path || '/', hash: location.hash || '', query, params: location.params || {}, fullPath: getFullPath(location, stringifyQuery), matched: record ? formatMatch(record) : [] }

• 第 23 行：meta: (record && record.meta) || {}—— 当没有命中任何记录时，$route.meta同样回退为空对象；
• 第 29 行：matched: record ? formatMatch(record) : []—— 命中的记录交给formatMatch展开成完整链。

formatMatch的实现非常直观——沿着记录的parent指针一路回溯到根，并用unshift把祖先记录依次放入数组头部，从而保证"父在前、子在后的顺序"：

function formatMatch (record: ?RouteRecord): Array<RouteRecord> { const res = [] while (record) { res.unshift(record) record = record.parent } return res }

而"哪些记录被命中"则由 src/create-matcher.js 中的match函数完成：它会遍历pathList，用每条记录预编译好的正则record.regex去匹配目标路径，命中后调用_createRoute→createRoute生成最终的Route对象。

3.3 关键结论：为什么必须遍历 matched

正因为一次导航可能命中多个嵌套的记录，$route.meta（单独的那个 meta）只是"最深命中记录"的 meta，父记录的 meta 不会自动合并进来。因此，官方文档明确指出：必须遍历$route.matched，逐一检查每个路由记录的meta字段（见 docs-gitbook/es/advanced/meta.md）。

这一设计的好处是：

• 父子记录的 meta 彼此隔离，父级标记（如"该区域整体需要权限"）与子级标记（如"该页面标题"）可以独立声明；
• 判断逻辑可以通过Array.prototype.some/every/filter灵活组合，语义清晰。

四、实战：在全局导航守卫中做登录鉴权

meta 最经典的用法，就是在全局前置守卫router.beforeEach中检查"当前路由是否需要认证"。官方文档给出了完整的参考实现（见 docs-gitbook/es/advanced/meta.md）：

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 该路由需要认证，检查用户是否已登录 // 未登录则重定向到登录页，并携带来源地址以便登录后回跳 if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 务必始终调用 next()！ } })

逐行拆解这段代码：

1. to.matched.some(record => record.meta.requiresAuth)：遍历目标路由to的所有命中记录，只要其中任意一条记录的 meta 标记了requiresAuth: true，就认为"本页需要登录"。借助some，父路由的权限标记可以自动覆盖其所有子路由。
2. auth.loggedIn()：业务代码中的登录态判断（这里为示意函数，实际项目一般读取 store / cookie / token）。
3. next({ path: '/login', query: { redirect: to.fullPath } })：未登录时重定向到登录页，并把完整的原始地址（to.fullPath包含 query 与 hash）放进redirect参数，登录成功后可据此回跳原页面。
4. next()分支全覆盖：无论命中与否，都必须调用next()，否则导航会一直挂起。这是使用导航守卫最容易踩的坑。

关于to与from这两个守卫参数，它们都是标准 Route 对象，因此同样拥有matched、meta等属性（参见 docs-gitbook/es/api/route-object.md）。此外，守卫还支持在单条路由上定义beforeEnter（记录在RouteRecord.beforeEnter中，见 src/create-route-map.js），以及组件内守卫，三者的完整调用关系可参考 docs-gitbook/es/essentials/navigation-guards.md。

五、进阶实战场景

掌握了meta+matched的组合拳之后，可以轻松扩展出更多实用能力：

5.1 页面标题

在 meta 中声明标题，并在全局守卫中设置document.title：

const routes = [ { path: '/user', component: User, meta: { title: '用户中心' } } ] router.afterEach((to) => { const matched = to.matched.filter(record => record.meta.title) if (matched.length) { document.title = matched[matched.length - 1].meta.title } })

5.2 过渡动画名

利用matched链上"最深记录"的 meta 来切换<transition>的 name，实现不同页面不同的切换动画。

5.3 面包屑 / 菜单高亮

把meta.breadcrumb、meta.menuKey等字段挂到各级记录上，再遍历to.matched生成面包屑数组或定位高亮菜单项——因为matched天然按父到子排序，正是面包屑的层级顺序。

5.4 多级权限细分

requiresAuth之外，你还可以声明meta.roles: ['admin']，配合some改为every实现"所有父级均需满足"等更细粒度的控制。注意 meta 支持任意类型结构，但建议保持扁平、可序列化，便于调试与状态持久化。

六、设计要点与注意事项

1. meta 默认值是空对象：从 src/create-route-map.js 和 src/util/route.js 可以看到，未声明 meta 时路由记录与 Route 对象都会得到{}，因此可以放心做链式访问，不必担心空指针。
2. meta 不会被自动合并：父记录的 meta 与子记录的 meta 是相互独立的，需要自行决定遍历与合并策略（some/every/filter）。
3. Route 对象不可变：每次成功的导航都会生成全新的 Route 对象（见 docs-gitbook/es/api/route-object.md），因此不要尝试修改to.meta来传递数据，应使用 store 或自定义参数。
4. 守卫必须放行：beforeEach的每个分支都要调用next()，否则导航挂起；next(false)可取消导航，next(error)会终止并抛出错误。
5. 与嵌套路由配合：嵌套路由是产生"多记录命中"的前提，相关配置细节可参考 docs-gitbook/es/essentials/nested-routes.md。

七、小结

meta字段是 vue-router 为路由附加业务元数据的官方机制：定义时写在路由配置对象中，读取时通过$route.matched遍历所有命中的路由记录。其底层实现（RouteRecord.meta的存储、formatMatch的链式展开、createMatcher.match的命中判定）保证了"一 URL 多记录"场景下元信息的完整可追溯性。结合全局导航守卫，你可以仅用十几行代码实现可靠的登录鉴权、页面标题与面包屑等通用能力，是 vue-router 项目中最值得优先掌握的进阶技巧之一。

• 前端
• 路由