NuxtJS页面标题不变

Question

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

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

在 nuxtjs 配置中：

module.exports = {
  head: {
    title: pkg.name
}
...
}

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

Answer 1

您nuxt.config.js在页面中设置的覆盖标题。

您应该在以下位置使用 titleTemplate nuxt.config.js：

head: {
  titleTemplate(titleChunk) {
    return titleChunk ? titleChunk : pkg.name
  }
}

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

head: {
  titleTemplate(titleChunk) {
    return titleChunk ? `{pkg.name} - ${titleChunk}` : pkg.name
  }
}

titleChunk像您已经做的那样来自head.title您的页面。