如何在Nuxt路由中添加元标记？

Question

在Vue中，我们像这样定义meta：

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

但是我们如何在 Nuxt 中定义元信息（meta）呢？

- Axel

---

已经有一个被接受的答案，但要记住，在使用Nuxt（在SSR模式下）时，您不能运行任何最初的中间件（页面加载）...我选择完全忽略Nuxt中的中间件。 - Vasili

Answer 1

你可以使用vue-router的meta作为自定义组件属性。 https://github.com/nuxt/nuxt.js/issues/1687#issuecomment-331870619 简单示例 https://github.com/nuxt/nuxt.js/tree/2.x/examples/routes-meta

- shuhei fn

Answer 2

我建立了一个Nuxt模块，基本上是在构建时将页面变量注入到route.meta属性中。然后你可以在this.extendRoutes内部使用它，或者使用@nuxtjs/sitemap生成网站地图路由。

通过npm install nuxt-route-meta安装它，并将其添加到你的nuxt.config.js中：

// nuxt.config.js

export default {
  modules: [
    'nuxt-route-meta',
  ],
}

在页面中添加元属性：

export default {
  auth: true,
  meta: {
    theme: 'water',
  },
}

现在每个路由中都有route.meta属性。例如，您可以通过在模块内使用this.extendRoutes来检查它：

export default function () {
  this.extendRoutes(routes =>
    routes.forEach(route => {
      if (route.meta.auth) {
        // do something with auth routes
      }
    })
  )
}

- Sebastian Landwehr

---

如何将 auth: true 成为 meta 的一部分。它在 {} 之外？ - jolly

这是模块实现的方式。它将页面对象内的所有数据加上meta内的数据添加到route.meta中。 - Sebastian Landwehr

我已经实现了它，但我的route.meta只是{}。 - jolly

@jolly 好的，可能与文件中使用的某些功能与 nuxt-route-meta 不兼容有关，但我们可以使其支持。或者可能是其他一些小问题。我建议在 https://github.com/dword-design/nuxt-route-meta/issues 上创建一个问题，并在此处链接它。这样我们就不会在 stack overflow 上调试东西了 :). - Sebastian Landwehr