编辑“︁Vue Router路由元信息”︁

== Vue Router路由元信息 ==

'''路由元信息'''是Vue Router提供的一项功能，允许开发者为路由记录附加自定义数据。这些数据可用于控制页面访问权限、设置页面标题、标记需要缓存的组件等场景。元信息通过路由配置对象的<code>meta</code>属性定义，可在导航守卫、组件内或全局访问。

=== 基础概念 ===
在Vue Router中，每个路由记录（route record）可以包含一个<code>meta</code>字段，该字段是一个普通对象，用于存储与该路由相关的任意信息。例如：

<syntaxhighlight lang="javascript">
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, title: '控制面板' }
  }
]
</syntaxhighlight>

元信息的主要特点：
* 可嵌套：子路由会继承父路由的元信息
* 可覆盖：子路由可以覆盖父路由的同名元字段
* 可通过<code>$route.matched</code>数组访问所有匹配路由的元信息

=== 代码示例 ===
==== 基本定义 ====
<syntaxhighlight lang="javascript">
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      meta: { requiresAuth: true },
      children: [
        {
          path: 'profile',
          component: Profile,
          meta: { title: '用户资料' } // 会合并父级meta
        }
      ]
    }
  ]
})
</syntaxhighlight>

==== 访问元信息 ====
在组件内部：
<syntaxhighlight lang="javascript">
export default {
  created() {
    console.log(this.$route.meta.requiresAuth) // 访问当前路由的元信息
  }
}
</syntaxhighlight>

在导航守卫中：
<syntaxhighlight lang="javascript">
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
</syntaxhighlight>

=== 元信息合并规则 ===
当路由有嵌套关系时，元信息会按照以下规则合并：
1. 父路由的meta对象会被浅拷贝到子路由
2. 同名属性会被子路由覆盖

<mermaid>
flowchart LR
    A[父路由 meta: {a:1, b:2}] --> B[子路由 meta: {b:3, c:4}]
    C[结果 meta: {a:1, b:3, c:4}]
</mermaid>

数学表示：
<math>
meta_{result} = \{...meta_{parent}, ...meta_{child}\}
</math>

=== 实际应用场景 ===
==== 1. 权限控制 ====
<syntaxhighlight lang="javascript">
{
  path: '/admin',
  meta: { roles: ['admin', 'superuser'] },
  component: AdminPanel
}
</syntaxhighlight>

然后在导航守卫中检查用户角色：
<syntaxhighlight lang="javascript">
router.beforeEach((to, from, next) => {
  const requiredRoles = to.meta.roles || []
  if (requiredRoles.length && !hasAnyRole(requiredRoles)) {
    next('/forbidden')
  } else {
    next()
  }
})
</syntaxhighlight>

==== 2. 动态页面标题 ====
<syntaxhighlight lang="javascript">
router.afterEach((to) => {
  document.title = to.meta.title || '默认标题'
})
</syntaxhighlight>

==== 3. 过渡动画控制 ====
<syntaxhighlight lang="javascript">
{
  path: '/details/:id',
  component: Details,
  meta: { transition: 'slide-left' }
}
</syntaxhighlight>

在组件中使用：
<syntaxhighlight lang="html">
<transition :name="$route.meta.transition || 'fade'">
  <router-view></router-view>
</transition>
</syntaxhighlight>

=== 高级用法 ===
==== 类型安全（TypeScript） ====
为meta字段定义类型：
<syntaxhighlight lang="typescript">
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    title?: string
    roles?: string[]
    cacheKey?: string
  }
}
</syntaxhighlight>

==== 组合式API访问 ====
使用Vue 3的组合式API：
<syntaxhighlight lang="javascript">
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.meta.title)
  }
}
</syntaxhighlight>

=== 最佳实践 ===
* 保持元信息简洁，仅存储路由特有的数据
* 为常用元字段建立文档规范（如<code>title</code>, <code>requiresAuth</code>等）
* 在大型项目中使用TypeScript定义元信息类型
* 避免在元信息中存储复杂对象或函数

=== 常见问题 ===
'''Q: 为什么有时访问<code>$route.meta</code>得到的是空对象？'''
A: 这可能是因为你访问的是根路由的meta。使用<code>$route.matched</code>数组可以获取所有匹配路由的合并后meta。

'''Q: 如何为路由组设置公共元信息？'''
A: 可以创建一个包装函数：
<syntaxhighlight lang="javascript">
function withCommonMeta(routes, meta) {
  return routes.map(route => ({
    ...route,
    meta: { ...meta, ...route.meta }
  }))
}
</syntaxhighlight>

=== 总结 ===
路由元信息是Vue Router中一个简单但强大的功能，通过合理使用可以：
* 实现集中式的路由配置管理
* 减少组件与路由的耦合
* 增强应用的可维护性
* 实现各种路由级别的控制逻辑

通过本文的示例和实践建议，开发者可以充分利用这一特性构建更灵活的前端应用架构。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue Router路由]]