javascript - Vue meta 没有得到更新

Question

当我访问我的内部页面时 vue-meta不会被新的页面值更新。
代码app.js

import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
    refreshOnceOnNavigation: true
})

App.vue (主要成分)

export default {
  metaInfo() {
    return {
      title: process.env.MIX_APP_NAME,
      titleTemplate: `%s | ${process.env.MIX_APP_NAME}`,
      meta: [
        { name: "robots", content: "index,follow" },
        {
          vmid: "description",
          name: "description",
          content:
            "..........",
        },
        // and many more....
      ],
   }
  }
}

post.vue (内部组件)

export default {
  name: "singePost",
  data() {
    return {
      post: "",
    };
},
metaInfo() {
    return {
        title: this.post.name, // not receiving data
        meta: [
            {
                vmid: "description",
                name: "description",
                content: this.post.metas[0].description, // not receiving data
            },
            // others......
        ],
    }
},
mounted() {
    this.getPost();
},
methods: {
    getPost() {
        axios
        .get("/api/articles/" + this.$route.params.slug, {
          headers: {
            Authorization: localStorage.getItem("access_token"),
          },
        })
        .then((response) => {
          this.post = response.data.data;
        })
        .catch((error) => {
            //....
        });
    },
},

任何想法？
更新
当我发布这个问题时，它是关于没有更新的，然后在做了一些研究并玩弄了我的代码之后，我意识到我的 vue-meta 更新了，但是晚了 它会导致社交网络网站和 SEO 检查器无法正确检索我的 URL。
阐明

Vue-meta 更新但晚了

此延迟更新导致共享和验证的时间链接无法呈现 SEO。

My full meta tags code

metaInfo() {
    return {
      title: this.post.name,
      meta: [
        {
          vmid: "keyword",
          name: "keyword",
          content: this.post.metas[0].tags,
        },
        {
          vmid: "description",
          name: "description",
          content: this.post.metas[0].description,
        },
        // Open Graph / Facebook
        { vmid: "og:type", name: "og:type", content: "website" },
        {
          vmid: "og:url",
          name: "og:url",
          content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
        },
        {
          vmid: "og:site_name",
          name: "og:site_name",
          content: `"${process.env.MIX_APP_NAME}"`,
        },
        {
          vmid: "og:title",
          name: "og:title",
          content: this.post.name,
        },
        {
          vmid: "og:description",
          name: "og:description",
          content: this.post.metas[0].description,
        },
        {
          vmid: "og:image",
          name: "og:image",
          content: this.post.imagebig,
        },
        //   Twitter
        {
          vmid: "twitter:card",
          name: "twitter:card",
          content: "summary",
        },

        {
          vmid: "twitter:author",
          name: "twitter:author",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:site",
          name: "twitter:site",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:creator",
          name: "twitter:creator",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:url",
          name: "twitter:url",
          content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
        },
        {
          vmid: "twitter:title",
          name: "twitter:title",
          content: this.post.name,
        },
        {
          vmid: "twitter:description",
          name: "twitter:description",
          content: this.post.metas[0].description,
        },
        {
          vmid: "twitter:image",
          name: "twitter:image",
          content: this.post.imagebig,
        },
      ],
    };
},

额外的

最近我读到一篇文章，因为基于 JavaScript 社交媒体爬虫的 vue-meta(通常是 Vue)加载不会缓存它们，因此当我在 FB 或 Twitter 等中分享它们时无法看到我的链接详细信息。

建议的解决方案是使用 Nuxt 并返回元数据服务器端。

问题

我不确定上面的#1 有多少是正确的，但它有可能

我的应用程序一般不使用 Nuxt，但我只是安装了它的 npm 包，所以可能值得一试(正如我提到的，我从未使用过 Nuxt，所以如果你的帮助解决方案是这种情况，如果你能提供一点，我将不胜感激额外的细节到你的答案)。

Answer 1

Vue 本身就是客户端的 JS 框架。当您构建时，您的 index.html没有任何内容 - 只有在执行时生成内容的 JS。同样适用于 VueMeta。问题是，当您共享链接(FB、Twitter 等)时，他们使用自己的机器人(本质上是爬虫)下载链接页面并分析内容 在 内不执行任何 JS - 所以是的，他们没有看到 VueMeta 生成的任何元数据......
唯一的解决方案是在不执行 JS 的情况下交付包含所有重要信息的完全(或部分)预渲染页面
一种方法是使用 Vue server side rendering - 你是对的，像 Nuxt 这样的框架正是使用它。
一般有两种口味:
SSR - 页面在客户端(或机器人)请求时呈现。在大多数情况下，它需要运行 Node 服务器(因为 Vue SSR 是在 JS 中实现的)。最突出的例子是 Nuxt.js
SSG - 服务器端生成。页面在构建时生成，包括所有 HTML。加载到浏览器服务器时返回 HTML + 所有 JS/CSS，但加载时它是相同的 Vue SPA。您不需要 Node 服务器，因此您可以托管在 CDN 或任何静态托管服务(如 Netlify)上。 Vue 世界中的例子有 Gridsome、VuePress、Nuxt 也可以做到……
注意:还有其他方法，例如使用 headless chrome/puppeteer或 https://prerender.io/ 等服务
纽斯特
如前所述，Nuxt 很棒，但对您的应用程序的结构(基于文件的路由)、如何获取数据等非常固执己见。因此切换到 Nuxt 可能意味着完全重写应用程序。最重要的是需要运行 NODE 服务器 这有其自身的后果(托管)。
但是 在我看来，您已经在使用服务器 - Laravel。所以你最好的选择可能是直接在 Laravel 中实现你的元渲染。
更新:似乎可以做 Vue SSR directly in Laravel