javascript - Nuxt JS SSR 标题未定义

Question

我正在使用 Nuxt JS/Vue 创建一个 SEO 友好的服务器端渲染 JS 网络应用程序。 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>

Answer 1

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

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