Javascript NuxtJS页面标题未更改

我正在从事一个nuxtJS项目，对nuxt或vue不太了解，我想要的是更改页面标题，但它为所有页面显示一个标题，该标题属于一个组件，我删除了该标题，现在它什么也不显示。我把这段代码放在header组件中

<script>
    export default {
    name: "header",
    head () {
        return {
            title: this.title
        }
    },
    data () {
        return {
            title: 'Hello World!'
        }
    }
    }
</script>

---

我想要的是，动态显示每个页面的标题。

您的

numxt.config.js

覆盖页面中设置的标题

您应该在

numxt.config.js

中使用titleTemplate：

标题：{
titleTemplate（titleChunk）{
返回titleChunk？titleChunk:pkg.name
}
}

通过这种方式，您还可以使用站点名称设置每个页面的标题格式：

标题：{
titleTemplate（titleChunk）{
返回titleChunk？`{pkg.name}-${titleChunk}`:pkg.name
}
}

---

titleChunk

来自页面的

head.title

，就像您已经做的那样。

在页面上设置动态标题的唯一选项类似于覆盖head函数 让我给你看一个例子

export default {
  ...
  head () {
    return {
      title: 'YOUR PAGE TITLE',
      meta: [
        { hid: 'og-title', property: 'og:title', content: 'YOUR PAGE TITLE },
        ...
      ]
    }
  }
}

为了防止覆盖父元字段，hid应该是唯一的

欲了解更多信息，请访问NuxtJs的官方文件：

export default {
  ...
  head () {
    return {
      title: 'YOUR PAGE TITLE',
      meta: [
        { hid: 'og-title', property: 'og:title', content: 'YOUR PAGE TITLE },
        ...
      ]
    }
  }
}