在VUE中切换语言时如何更改头部元数据

Question

有人问过这个问题吗？如果是，请给我阅读这个问题的链接，如果不是，如何做到这一点？我想更改标题和描述每个用户切换语言，我该怎么做？？我真的很想得到一些帮助，我是。这方面的初学者：D

我有gallery.vue

我在这里使用nuxt js

并使用nuxt-i18n基于vue-i18n

<template lang="html">
<div class="">
<p> {{ $t('post') }}</p>
</div>
</template>
<script>
export default {
head () {
return {
tittle: // how to change tittle here for the spesific languange
}
}
}
</script>
<style lang="css">
</style>

我想要这样的结果当用英语说话的时候，头会笑成Gallery当用户切换意大利时，头像将是Galleria

Answer 1

这可能有点晚，但是为了帮助新来者。

根据文档，您可以使用函数来设置元数据，因此使用函数可以访问数据并进行计算(包括此项(，请检查代码：

head() {
return {
title: this.$t('myTitle'),
htmlAttrs: {
lang: this.$i18n.locale,
},
meta: [
{
hid: 'description',
name: 'description',
content: this.$t('myDescription'),
},
],
}

}，

来源：https://nuxtjs.org/docs/2.x/features/meta-tags-seo#local-设置

Answer 2

查找vue元库。我用它来达到这个目的。在App.vue中：

<script>
export default {
name: 'App',
metaInfo () {
return {
htmlAttrs: {
lang: this.$i18n.locale
},
...
}
},
data () {
...
}
</script>

Answer 3

我明白了只需添加head函数并返回标题：this.$i18n.messages[this.$i18n.locale].yourPropHere