NuxtJS 页面标题不变答案

【问题标题】：NuxtJS page title not changeNuxtJS 页面标题不变
【发布时间】：2020-01-10 00:28:55
【问题描述】：

我正在做一个 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
}
...
}

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案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，就像您已经做的那样。

【讨论】：

【解决方案2】：

只有选项可以根据您的页面动态设置标题，就像覆盖 head 功能让我在这里给你举一个例子

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

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

更多信息请访问NuxtJs官方文档：https://nuxtjs.org/api/pages-head/

【讨论】：