当我访问我的内部页面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，所以如果你的帮助解决方案是这种情况，如果你能提供一点，我将不胜感激额外的细节到你的答案）。