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

Question

我必须为我的文章显示动态元描述，而我正在努力使用我的 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()对象中用于元描述的内容。将不胜感激一些帮助！

标签： javascripttypescriptvue.jsnuxt.js

Answer 1

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

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

如果您的水疗中心对 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

}