NuxtJS 头部组件

【问题标题】：NuxtJS Head ComponentNuxtJS 头部组件
【发布时间】：2020-04-12 18:39:27
【问题描述】：

Nuxt.js 推送 strange head configuration syntax 作为在头部设置元素的“方式”。无论如何在 Nuxt 中使用 HTML 或 Vue 组件来做到这一点？作为nuxt.config.js 文件的一部分，这感觉很奇怪。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

是的，当然你可以在每个组件中添加一个head 方法。

您还可以在组件中使用head 作为函数，通过this (read more) 访问组件数据。

这是来自read more 页面的示例：

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

【讨论】：