首页 文章

Nuxt JS SSR Headers 未定义

提问于
浏览 次
1

我正在使用Nuxt JS / Vue创建一个SEO友好的服务器端渲染JS Web应用程序 . Nuxt允许在每个Vue组件中设置 head 选项，然后通过 vue-meta 更新页面 Headers . 我根据路线获得用户，然后将 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 回答

  • 1

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

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

相关问题