vue js中axios调用后如何更新头部标题

Question

我有一个产品页面，我在其中传递产品 ID 并基于此我调用 rest Api 并且在 Api 响应之后我需要使用产品名称更新标题标签。我能够更新标题标签，但在查看源代码中我将值作为未定义或默认值。那么如何在开始时更新标题，以便在查看源中获取产品名称。所以这将是 SEO 友好的。

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      setTitle: {}
    }
  },
  created () {
    axios.get('https://apiurl.com/testing.json')
          .then((response) => {
            this.setTitle = response.data            
          })
  },
  metaInfo() {
    return {
      title: `${this.setTitle.product_name} product name`,
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    }
  }
}

如果在我的项目中 SSR 为假，是否有可能？

Answer 1

您应该使用 nuxt 提供的 asyncData 钩子，该钩子在创建页面之前运行（您不需要在 data 选项中定义 setTitle ）并将 metaInfo 替换为 head ：

export default{
 name: 'App',
  components: {
    HelloWorld
  },
 async asyncData() {
    const {data} = await  axios.get('https://apiurl.com/testing.json')
    return { setTitle:data} // without defining data option
  },
  head() {
    return {
      title: `${this.setTitle.product_name} product name`,
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    }
  }
}