vue.js - Vue meta i18n 变量名显示而不是值
问题描述
我有一个带有 vue-meta 的 vue2 项目,并且我有 vue-i18n 来本地化该项目。在我的浏览器书签中,未显示网页的标题。而是显示变量。在谷歌分析中查看同样的问题时,似乎显示的是我的变量而不是变量中的值。
这是我的 Home 组件中的代码片段:
name: 'Home',
metaInfo () {
return {
title: this.$t("home.meta.title"),
meta: [{
name: "description",
content: this.$t("home.meta.descriptioncontent")
}, {
name: "keywords",
content: this.$t("home.meta.keywordscontent")
},
{ property: 'og:title', content: this.$t("home.meta.title")},
{ property: 'og:site_name', content: 'www.examplesite.se'},
{ property: 'og:description', content: this.$t("home.meta.descriptioncontent")},
{ property: 'og:type', content: 'Home'},
{ property: 'og:url', content: 'https://examplesite.se/'},
{ property: 'og:image', content: 'https://www.examplesite.se' + '/img/' + 'example_logo_social.png'}
]
}
},
data() {
return {
fimagefolder: '../../Images/',
bimagefolder: '../../fImages/',
};
},
所以 this.$t("home.meta.title") 变量存储瑞典语和英语翻译。当在网站内部时,它会显示两种语言的正确标题,但谷歌分析只显示“home.meta.title”。
据我了解,由于未加载任何脚本,爬虫看不到我的变量值?有任何想法吗?
解决方案
最好看看你的一些代码,看看你是如何设置它的,否则我们有点不知所措,很难提供帮助。所以,这更像是一个评论而不是一个答案,但我正在分享一些可能有帮助但不适合评论的代码。
我假设您正在使用 vue-i18n,我的猜测是您将 vueMeta 定义为一个对象。然而,如果您将其定义为一个函数,您可以访问其他组件数据,包括this.$t
. 它应该像这样一起工作:
<template>
<div>
<p>The title of this page should be 'Translated Title'.</p>
</div>
</template>
<script>
export default {
metaInfo () {
return {
title: this.$t('title')
}
}
}
</script>
<i18n>
{
"en": {
"title": "Translated Title"
}
}
</i18n>
推荐阅读
- cookies - 在 oAuth dance 生成的 cookie 中使用 userId 作为我的应用程序用户的 Id
- php - 通过 Scoop 安装 Composer 时,SSL/TLS 需要 openssl 扩展
- python - Python - 使用存储的字符串选择全部
- r - 如何使用 VS Code 调试 R-Shiny 代码
- kotlin - 在类中测试 Kotlin 扩展
- react-admin - NumberField 文本自 react-admin 2.1.3 起对齐
- python - 3D 点的平滑 Mayavi 可视化
- php - 如何防止 php 会话得到错误的值?
- angular - SASS 子选择器没有找到它的目标
- html - vue js组件中的原始html(使用nuxt)