如何在Vue js中使用vue-meta从动态数据更新元信息？

Question

我的文章有各自的元描述。 我正在使用vue-meta来替换默认的元描述。 我尝试使用 async 和 mount 属性从我的 API 获取信息，但我没有看到头部有任何变化，即在相应文章的元描述中。 我仍然看到Vue js设置的默认值。

这就是我所拥有的：

<script lang="ts">

import { Vue } from 'vue-property-decorator';
import VueMeta from 'vue-meta';

Vue.use(VueMeta);

export default class ArticleContent extends Vue {
  article: any | null = null;
  articlelist: any = null;
  id = 1;

  async mounted(): Promise<any> {
    this.article = this.articlelist.find((f: any) => {     <-- slug
      return f.title_slug === this.$route.params.id;
    });
    this.articlelist = await this.asyncData();
  }

  async asyncData(): Promise<any> {
    const articlelist = await this.$axios.get(             <-- call to my api
      'https://my_api...'
    );
    return articlelist.data.data;
  }

    metaInfo(): any {                                      <-- meta information
    return {
      title: 'Article',
      meta: [
        {
          hid: this.articlelist[0]._id,
          name: this.articlelist[0].productNames['en'],
          content: this.articlelist[0].metaDescription['en'],
        },
      ],
    };
  }
}
</script>

我希望得到一些帮助，谢谢！

Answer 1

嗨，而不是使用asyncData你可以使用serverPrefetch

尝试这个

 serverPrefetch():Promise<any> {
  // this function should return Promise
   return this.$axios.get(
      'https://my_api...'
    ).then(result => {
          this.articlelist = result.data.data
      });

  }