Vue 元未获得更新

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。

阐明

1. Vue-meta 得到更新但晚了
2. 这种较晚的更新导致 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,
        },
      ],
    };
},

额外的

1. 最近我读了一篇文章，因为基于 JavaScript 社交媒体爬虫加载的 vue-meta（一般是 Vue）不会缓存它们，因此当我在 FB 或 Twitter 等上分享它们时，不可能看到我的链接详细信息。

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

问题

1. 我不确定上面的 #1 有多少是正确的，但有可能
2. 我的应用程序一般不使用 Nuxt，但我刚刚安装了它的 npm 包，所以它可能值得一试（正如我提到的，我从未使用过 Nuxt，所以如果您的帮助解决方案就是这种情况，我将不胜感激，如果您包含一点额外的细节到你的答案）。

Answer 1

Vue 本身是客户端 JS 框架。当您构建时，您index.html没有任何内容 - 只有在执行时生成内容的 JS。这同样适用于 VueMeta。问题是，当您共享链接（FB、Twitter 等）时，他们使用自己的机器人（本质上是爬虫）下载链接页面并分析内容而不在内部执行任何 JS - 所以是的，他们看不到任何由VueMeta...

唯一的解决方案是在不执行 JS 的情况下提供包含所有重要信息的完全（或部分）预渲染页面

这样做的一种方法是使用Vue 服务器端渲染——你是对的，像 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 中实现你的元渲染。

更新：似乎可以直接在 Laravel 中执行 Vue SSR