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

只有一个选项可以在页面上设置标题动态基准，就像覆盖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/

Answer 2

您的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，就像您已经做过的一样。

NuxtJS页面标题不变

2 个答案: