路由元数据

什么是路由元数据

meta 是每个路由配置对象上可以添加的一个自定义字段，它不会影响路由匹配，只是一个「额外数据容器」。

meta 是如何合并的

假设我们有这样的嵌套路由：

{
  path: '/posts',
  component: Layout,
  meta: { layout: 'main' },
  children: [
    {
      path: 'new',
      component: NewPost,
      meta: { requiresAuth: true }
    }
  ]
}

当访问 /posts/new 时：

• 匹配了两个路由记录：父 /posts + 子 /posts/new
• Vue Router 会自动把这两层 meta 合并成一个对象：

route.meta // => { layout: 'main', requiresAuth: true }

这样你就不用手动去遍历 route.matched 数组了。

访问 meta 信息

在守卫中使用

• to.meta 会自动合并所有匹配的路由记录的 meta；

• 所以你不需要自己遍历 to.matched；

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    return {
      path: '/login',
      query: { redirect: to.fullPath }, // 登录后跳回原地址
    }
  }
})

在组件中直接访问

import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.meta.requiresAuth)