RouteMeta - 路由元数据接口

RouteMeta 接口定义了路由配置中的自定义元数据字段。它允许你为路由添加任意的附加信息，用于权限控制、页面配置、SEO优化等各种场景。🏷️

📋 接口定义

interface RouteMeta {
  [key: string]: any
}

🎯 功能说明

路由元数据就像是路由的"自定义标签"，可以存储各种附加信息：

1. 权限控制 - 记录路由访问所需的权限级别
2. 页面配置 - 设置页面标题、布局、主题等
3. SEO 优化 - 提供搜索引擎优化相关信息
4. 功能开关 - 控制特定功能的启用状态
5. 业务逻辑 - 存储与业务相关的各种配置

🔧 接口特性

灵活的键值对结构

// RouteMeta 本质上是一个任意键值对对象
interface RouteMeta {
  [key: string]: any // 可以是任何类型的值
}

类型安全的扩展

// 可以通过接口扩展来定义具体的元数据结构
interface CustomRouteMeta extends RouteMeta {
  requiresAuth: boolean
  title: string
  layout: 'default' | 'admin' | 'auth'
  permissions: string[]
}

💡 实际应用示例

基础路由配置

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      title: '首页',
      requiresAuth: false,
      layout: 'default'
    }
  },
  {
    path: '/admin',
    component: Admin,
    meta: {
      title: '管理后台',
      requiresAuth: true,
      permissions: ['admin'],
      layout: 'admin'
    }
  }
]

在导航守卫中使用元数据

// 全局前置守卫 - 权限检查
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login'
  }
  
  if (to.meta.permissions) {
    const hasPermission = to.meta.permissions.every(perm =>
      hasUserPermission(perm)
    )
    if (!hasPermission) return '/unauthorized'
  }
  
  return true
})

// 全局后置钩子 - 页面标题设置
router.afterEach((to) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

在组件中访问元数据

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

const pageTitle = computed(() => route.meta.title || '默认标题')
const layoutClass = computed(() => `layout-${route.meta.layout || 'default'}`)
</script>

🎯 常见元数据字段

权限和认证相关

meta: {
  requiresAuth: true,           // 是否需要登录
  permissions: ['read', 'write'], // 所需权限
  roles: ['admin', 'editor'],   // 所需角色
  guestOnly: false             // 仅允许未登录用户访问
}

页面配置相关

meta: {
  title: '产品详情',            // 页面标题
  description: '产品详细信息页面', // 页面描述
  layout: 'product',            // 页面布局
  theme: 'dark'                // 页面主题
}

SEO 和统计相关

meta: {
  canonical: '/product/123',    // 规范链接
  robots: 'index,follow',      // 搜索引擎指令
  trackPageView: true,         // 是否统计页面浏览
}

🔧 实用工具函数

元数据合并

// 合并多个路由记录的元数据
function combineRouteMeta(route): RouteMeta {
  return route.matched.reduce((meta, record) => ({
    ...meta,
    ...record.meta
  }), {})
}

类型安全的元数据访问

// 安全的元数据访问函数
function getRouteMeta<T>(route, key: string, defaultValue: T): T {
  const meta = combineRouteMeta(route)
  return meta[key] !== undefined ? meta[key] : defaultValue
}

🔗 相关接口

• RouteLocationNormalized - 标准化路由位置
• RouteRecordNormalized - 标准化路由记录

💡 专业建议：为元数据字段建立统一的命名规范，并在项目中保持一致性，这样可以提高代码的可维护性。