如何在nuxt路由器中添加meta？答案

【问题标题】：How to add meta in nuxt router?如何在nuxt路由器中添加meta？
【发布时间】：2019-03-18 11:59:56
【问题描述】：

在vue中，我们这样定义meta：

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

但是我们如何在nuxt中定义meta呢？

【问题讨论】：

有一个答案已被接受，但请记住，在使用 Nuxt（在 SSR 模式下）时，您不会得到中间件来运行任何初始（页面加载）...我选择完全忽略中间件在 Nuxt。

标签： javascript vue.js nuxt.js

【解决方案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

【讨论】：

【解决方案2】：

我构建了一个Nuxt module，它基本上在构建时将页面变量注入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
      }
    })
  )
}

【讨论】：

如何 auth: true 成为元数据的一部分。它在 {} 之外？
这是模块的实现方式。它将页面对象内的所有数据+ meta 内的所有数据添加到 route.meta。
我实现了它，但我的 route.meta 只是 {}。
@jolly 好吧。它可能与文件中使用的某些功能有关，但 nuxt-route-meta 尚不支持，但我们可以使其支持。或者是其他一些小问题。我想说最好是在github.com/dword-design/nuxt-route-meta/issues 上创建一个问题并将其链接到此处。所以我们不会在这里调试堆栈溢出的东西:)。