NuxtJS 加载组件打开带有 json 响应的图元

Question

我正在处理一个nuxt.js 项目，并且我有一个页面加载来自 WordPress 帖子的内容（基本上是文本），在 create() Hook 上有一个 $http 请求。

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

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

Answer 1

不要使用 created 钩子，使用 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/