NuxtJs 动态开放图标签不起作用

如何解决NuxtJs 动态开放图标签不起作用

我正在尝试使用以下代码设置动态开放图元标记

    async asyncData({ app,route }) {
        let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
        postDetails = postDetails.data.post;
        return { postDetails };
    },head() {
        return {
             Meta: [
                { hid: 'title',name: "title",content: this.postDetails.title },{ hid: "description",name: "description",content: this.postDetails.body },{ hid: "twitter:image",name: "twitter:image",content: this.postDetails.image },{ hid: "twitter:card",name: "twitter:card",content: "summary_large_image" },{ hid: "og:image",name: "og:image",{ hid: "og:image:secure_url",name: "og:image:secure_url",{ hid: "og:title",name: "og:title",{ hid: "og:description",name: "og:description",{ hid: "og:url",name: "og:url",content: window.location.href }
            ]
        };
    },

我已经记录了 postDetails 并且数据在 asyncData 函数中。现在，当我打开页面并检查元标记已完全更改时，但是当我打开 facebook 并粘贴它或按 ctrl + u 时，它只显示其默认的打开图形标记。我在这里做错了什么？有人可以帮忙吗？

解决方法

尝试了很多东西，不幸的是他们没有成功。因此，我找到了一种方法，只需将元标记注入 app 中的 asyncData 对象即可“破解”元标记。现在它就像一个魅力，我不知道是什么问题，我什至尝试手动安装 vue-meta。

async asyncData({ app,route }) {
        let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
        postDetails = postDetails.data.post;
        const mutation = app.head.meta.map(i => {
            if(i && i.hid){
                if(i.hid === 'title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body;
                }
                if(i.hid === 'twitter:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'twitter:card'){
                    i.content = 'summary_large_image'
                }
                if(i.hid === 'og:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'og:image:secure_url'){
                    i.content = postDetails.title;
                }
                if(i.hid === 'og:title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'og:description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'og:url'){
                    i.content = route.fullPath
                }
            }
            return i;
        });
      app.head.meta = mutation;
      return { postDetails };
},