javascript - NuxtJS页面标题不变

Question

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

<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 覆盖页面中设置的标题。

您应该在nuxt.config.js中使用titleTemplate:

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

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

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

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