摘要

创建路由时，你可以使用 meta 属性附加任何数据：

{ path: '/profile', meta: { requiresAuth: true }}

然后可以在导航守卫和 $route 上访问它：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !auth.loggedIn()) next('/login')
  else next()
})

然而，在处理嵌套路由时，meta 将只包含匹配的路由 meta。你仍然可以像文档中指出的那样，通过匹配记录的数组找到所有 meta。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth))
  // ...
})

我的建议时合并所有匹配的路由 meta，从父到子，这样我们就可以做 to.meta.requireAuth。我相信这就是 Nuxt 的做法，但我在文档中找不到链接。

基本范例

给定一个嵌套的路由：

{
  path: '/parent',
  meta: { requiresAuth: true, isChild: false },
  children: [
    { path: 'child', meta: { isChild: true }}
  ]
}

导航到 /parent/child 应该生成具有一下 meta 的路由：

{ requiresAuth: true, isChild: true }

大多数时候，合并 meta 属性是我们所需要的。我从来没有见过一个只需要嵌套 meta 属性的情况。

这将移除使用 to.match.some 来检查 meta 字段是否存在的必要。相反，只需要用它来检查被覆盖的 meta 属性。

meta 属性只在第一层进行合并，就像 Object.assing 和展开运算符一样：

{
  path: '/parent',
  meta: { nested: { a: true } },
  children: [
    { path: 'child', meta: { nested: { b: true }}}
  ]
}

在 /parent/child 时会产生如下 meta 对象：

{
  nested: {
    b: true
  }
}

N/A

N/A

N/A