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

Question

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

    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", content: this.postDetails.image },
                { hid: "og:image:secure_url", name: "og:image:secure_url", content: this.postDetails.image },
                { hid: "og:title", name: "og:title", content: this.postDetails.title },
                { hid: "og:description", name: "og:description", content: this.postDetails.body },
                { hid: "description", name: "description", content: this.postDetails.body },
                { hid: "og:url", name: "og:url", content: window.location.href }
            ]
        };
    },

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

Answer 1

尝试了很多东西，不幸的是他们没有成功。所以我找到了一种 'hack' 元标记的方法，只需将它们注入 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 };
},

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

NuxtJs dynamic open graph tags are not working

javascript

vue.js

nuxt.js

vue-meta