NuxtJS机头组件

Question

Nuxt.js将strange head configuration syntax作为在头部设置元素的“方式”。有没有办法在Nuxt中使用HTML或Vue组件来做到这一点？作为nuxt.config.js文件的一部分，这感觉非常奇怪。

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