Question

我正在使用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>

Answer 1

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

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

Answer 2

我知道这是一个老方法，但是我只是想对此事提供一些理由。.您可以使用两种解决方案：

head: { title : '' }

head() { return { title: '' }

但是两者之间的区别在于，当您将head用作属性时，将无法访问this或在asyncData或data方法中设置的任何属性，仅限于主行中的文本。原因是当您将其用作属性时，它会在构造组件时填充，实际上是在设置数据（在服务器上）之前

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

Nuxt JS SSR标题未定义

2 个答案: