1

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

    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 时，它只显示其默认打开的图形标记。我在这里做错了什么？有人可以帮忙吗？

4

1 回答 1

1

尝试了很多东西，不幸的是他们没有成功。所以我找到了一种方法来“破解”元标记，只需将它们注入到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 };
},
于 2021-03-08T12:56:21.943 回答