如何在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 当用户切换 italianq 时，头部将是 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-settings

Answer 2

寻找 vue-meta 库。我正在为此目的使用它。在 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

Answer 4

或者你可以使用

import i18n from '@/locales/i18n'
export default {
metaInfo() {
        return {
            meta: [
                {
                    name: 'title',
                    content: i18n.t('meta.title'),
                },
          ],
        }
    },
}

@/locales/i18n 是您的语言环境文件的路径，当您切换到另一种语言时，元标记将自动更改。我使用 vue-meta 2.4.0 和 vue2