3

我在 nuxtjs 上有一个站点，我使用 nuxt-i18n 设置了两种语言，英语作为默认语言。如果我设置第二语言并刷新页面 (f5)，当我尝试将语言切换回默认值时会出现问题。但是使用第二语言看起来不错。在此处输入图像描述

控制台中有很多错误，例如

[vue-i18n] Value of key 'auth.logout' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'auth.logout'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.label' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.label'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_asc' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.create_asc'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_desc' is not a string! vue-i18n.esm.js:33

此外，如果我使用默认语言加载页面然后切换到第二个语言，一切正常。

为了切换语言，我使用了一个组件。

<template>
  <v-row>
    <v-col cols="auto" id="language">
      <v-select
        v-model="current_language"
        dense
        :items="languages"
        item-value="code"
        item-text="name"
        max-width="10"
      >
        <template v-slot:selection="{ item }">
          <v-img :src="item.flag" max-height="32" max-width="32"></v-img>
          <span class="ml-3">{{ item.name }}</span>
        </template>
        <template v-slot:item="{ item }">
          <v-img :src="item.flag" max-height="32" max-width="32"></v-img>
          <span class="ml-3">{{ item.name }}</span>
        </template>
      </v-select>
    </v-col>
  </v-row>
</template>

<script>
export default {
  props: ["instant"],
  data() {
    return {
      current_language: this.$i18n.locale,
      languages: [
        {
          name: "English",
          code: "en",
          flag: "/img/usa-flag.png"
        },
        {
          name: "Russian",
          code: "ru",
          flag: "/img/russia-flag.png"
        }
      ]
    };
  },
  watch: {
    current_language(val) {
      if (typeof this.instant != "undefined") {
        this.$router.push({ path: this.switchLocalePath(val) });
      }
    }
  },
  methods: {
    save() {
      this.$router.push({ path: this.switchLocalePath(this.current_language) });
    }
  }
};
</script>
4

0 回答 0