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？

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

Answer 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
      }
    })
  )
}

Answer 3

您可以将想要添加元数据的页面添加到页面中。在页面内部放置

export default {
  head() {
    return {
      title: 'My Page title',
    }
  },
  data() { ... }
}

请参阅-https://nuxtjs.org/api/pages-head

如果您希望所有页面共享某些值，则可以像这样将元信息放入nuxt.config.js中

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'EN'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'marketing website' },
      { name: 'theme-color', content: '#0394da' }
    ]
  }
}

请参阅-https://nuxtjs.org/api/configuration-head

有关所有元属性的列表，请点击https://github.com/declandewet/vue-meta

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

3 个答案: