如何在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

您可以尝试做的一件事是从{articlelist: articlelist.data.data}返回类似asyncData的对象。 Nuxt在每次页面加载之前调用asyncData，并将合并的数据与组件的数据一起从其中返回。因此，您将不必在asyncData中调用mounted，也不必在组件顶部声明articlelist。

您可以尝试的另一种方法是使用Nuxt提供的head method而不是head。它还在后台使用metaInfo。

Answer 2

您好，然后使用VueMeta您可以使用asyncData

尝试一下

serverPrefetch