NuxtJS 加载组件 Open graph meta with json response

Question

我正在做一个 nuxt.js 项目，我有一个页面从 WordPress post 加载内容（基本上是文本），在创建时有一个 $http 请求（ ) 挂钩.

我想使用标题作为og:title元，但是我不能使用它，因为执行head方法时没有加载数据。

如何使用 $http 请求加载的 WordPress post 标题作为 oh:title 元？

Answer 1

不要使用已创建的挂钩，如果要从服务器端呈现内容，请使用 asyncData。

示例代码：

async asyncData({$axios, params }) {
    const post = ($axios.get(`/api/posts/${params.id}`)).data
    return {
      post
    }
  }

之后，只需使用nuxt.js提供的head() {}中的变量title即可。

示例代码：

head() {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'og:title',
            content: this.post.title,
            property: 'og:title'
          },
        ]
      }
    }

这是一篇文章，可能对你有帮助：

https://dripcoder.com/posts/how-to-add-open-graph-meta-tags-to-your-blog-post-in-nuxtjs/

NuxtJS 加载组件 Open graph meta with json response

NuxtJS load component Open graph meta with json response

wordpress

facebook-opengraph

vue.js

nuxt.js