Nuxt JS SSR 标题未定义答案

【问题标题】：Nuxt JS SSR title undefinedNuxt JS SSR 标题未定义
【发布时间】：2018-02-14 07:07:37
【问题描述】：

我正在使用 Nuxt JS/Vue 创建一个 SEO 友好的服务器端渲染 JS Web 应用程序。 Nuxt 允许在每个 Vue 组件中设置 head 选项，然后通过 vue-meta 更新页面标题。我根据路由获取用户，然后将title 设置为用户名。这在运行本地服务器时有效。但是当我将它推送到 Firebase 时，我得到 title 未定义（刷新时）。

Vue 组件：

<template>
  <div class="user">
    <h3>{{ name }}</h3>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      title: 'test'
    }
  },
  head () {
    return {
      title: this.name,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
  async asyncData ({ params, error }) {
    try {
      const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
      return data
    } catch (e) {
      error({ message: 'User not found', statusCode: 404 })
    }
  },
  mounted () {
    console.log(this.name)
    this.title = this.name
  }
}
</script>

【问题讨论】：

据我所知，您应该为此使用布局文件。
我遇到了同样的问题。如果我发现任何有用的东西，会回来报告。

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

我遇到了同样的问题，我用这个解决了。在导出默认 {} 下的脚本标记中的页面中添加以下代码。

head () {
        return {
            title: this.metaTitle,
            meta: [
                { hid: 'description', name: 'description', content: this.metaDescription },
                { name: 'keywords', content: this.metaTags},
            ]
        }
    }

【讨论】：

【解决方案2】：

我知道这是一个老套路，但我只是想就此事给出一些推理。您可以同时使用这两种解决方案：

head: { title : '' }

head() { return { title: '' }

但它们之间的区别在于，当您使用 head 作为属性时，您将无法访问 this 或您在 asyncData 或 data 方法中设置的任何属性，您将只能使用文本在主线。原因是当您将它用作属性时，它会在组件构建时填充，这实际上是在设置数据之前（在服务器上）

当您将其用作方法head() 并返回具有标准vue-meta 属性的对象时，您可以访问data() 和asyncData() 设置属性。

【讨论】：