Nuxt 从 API 获取标题标签

Question

我需要从 API 设置 OG:Tag

head() {
this.$axios
  .get(`............`)
  .then((response) => {
    this.og_title = response.data.message.course.course_name;
    this.og_description = response.data.message.course.description;
    this.og_image = response.data.message.course.img_url;

    console.log(this.og_title);
    return {
      title: this.title,
      meta: [
        {
          property: "og:title",
          content: this.og_title,
        },
        {
          property: "og:description",
          content: this.og_description,
        },
        {
          property: "og:image",
          content: this.og_image,
        },
      ],
    };
  });

并且它不起作用但是在控制台中它已经正确打印了总数但是在生产测试时它没有任何标签。

Answer 1

您应该在asyncData方法中执行 Axios 请求（和任何其他异步调用）。 asyncData只是将其返回值合并到组件的本地 state 中，因此您可以使用 .

请注意， asyncData仅适用于pages文件夹组件。

下面是一个使用 @nuxt/http 库的示例：

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    },
    head() {
      return {
        title: this.post.title,
        meta: [
          {
            property: "og:title",
            content: this.post.title,
          },
          {
            property: "og:description",
            content: this.post.description,
          },
          {
            property: "og:image",
            content: this.post.image,
          },
        ],
      };
    }
  }
</script>