NuxtJS加载组件使用json响应打开图形元

Question

我正在做一个nuxt.js项目，我有一个页面正在加载WordPress帖子中的内容(基本上是文本(，并在create((Hook上发出$http请求。

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

我如何使用$http请求加载的WordPress帖子标题作为oh：标题元？

Answer 1

不要使用创建的钩子，在需要从服务器端渲染的情况下使用asyncData。

示例代码：

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

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

示例代码：

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/