查看页面源时 Nuxt.js 标题和元内容“未定义”答案

【问题标题】：Nuxt.js title and meta content 'undefined' when viewing page source查看页面源时 Nuxt.js 标题和元内容“未定义”
【发布时间】：2020-12-28 05:43:49
【问题描述】：

我目前正在 Nuxt.js 应用程序中设置标题和元描述，但遇到了问题。当我单击“查看页面源”时，我在 head() 中设置的动态标题和元内容显示为“未定义”：

但是，当我检查页面时，此动态内容按预期显示：

在每个页面上，我将标题和元设置如下：

    head() {
      return {
        title: this.title + ' | CompanyName',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.description,
          },
        ],
      }
    },

关于为什么会发生这种情况以及如何解决的任何建议？

【问题讨论】：

标签： seo nuxt.js

【解决方案1】：

我似乎找到了解决办法。在上面的示例中，this.description 和 this.title 是通过 mount() 函数中的 API 调用填充的。如果这是通过 asyncData() 切换到 API 调用，那么当您查看页面源时，它不再是未定义的。

    async asyncData(context) {
      return context.$axios.get(`/endpoint`).then(result => {
          return {
            description: result.data,
          }
        }).catch(e => {
          context.error({ statusCode: 404, message: 'Error' })
        })
      }

【讨论】：