如何在 Vue js 中为我的头部对象使用异步函数？答案

【问题标题】：How can I use the async function for my head object in Vue js?如何在 Vue js 中为我的头部对象使用异步函数？
【发布时间】：2020-03-23 19:49:00
【问题描述】：

我必须为我的文章显示动态元描述，而我正在努力使用我的 head 对象的 async 函数来实现这一点。这是我目前所拥有的：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component

export default class ArticleContent extends Vue {
  article: any | null = null;
  articlelist = example.data;

  async asyncData({params: any }) { <----- Not sure how I could put in my articlelist here
    return this.articlelist;
  }

  head(): object {
    return {
      title: this.articlelist.productId.productNames['en'],
      meta: [
        {
          hid: this.articlelist._id,
          name: this.articlelist.productNames['en'],
          content: this.articlelist.metaDescription['en'],
        },
      ],
    };
  }
}
</script>

articlelist 是我在 head() 对象中用于元描述的内容。不胜感激！

【问题讨论】：

标签： javascript typescript vue.js nuxt.js

【解决方案1】：

head() 和 asyncData() 属性都不是 vue 核心的一部分，

要使用head()，您需要将this 作为插件安装
要使用asyncData()，你必须使用nuxt

如果你的 spa 对 seo 有强烈的需求，我建议你使用 nuxt，它原生包含 seo，并且从 vue 到 nuxt 的转换非常容易

如果你已经在使用 nuxt，这是正确的获取方式

async asyncData({params: any }) { 
 const articlelist = await axios.get('some.url'); //get the data
 return { articlelist }; //this object is merged with the data of the istance

}

【讨论】：