如何在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呢？

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 模塊，它基本上在構建時將頁面變量注入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