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>

我想要这样的结果用英语当头标题变成画廊而当用户切换“ italianq”时，头将是回廊

Answer 1

寻找vue-meta库。我正在为此目的使用它。在App.vue中：

<script>
export default {
  name: 'App',

  metaInfo () {
    return {
      htmlAttrs: {
        lang: this.$i18n.locale
      },
      ...
    }
  },

  data () {
  ...
}
</script>

Answer 2

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

Answer 3

这可能有点晚，但可以帮助新来者。

根据文档，您可以使用函数来设置元数据，以便使用您访问数据和计算（包括此）的函数，检查代码：

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

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

3 个答案: