Nuxt 2国际化多语言页面跳转、切换语言、获取locale当前语言

768 阅读1分钟

安装国际化语言包,注意本教程适用版本是nuxt2

"@nuxtjs/i18n": "^7.3.1",

在Nuxt.confug中添加配置

  modules: [
    [
      '@nuxtjs/i18n',
      {
        locales: ['ru', 'en', 'jp'], //有多少地区的语言就添加多少种
        defaultLocale: env[process.env.NODE_ENV]?.language || 'ru', //默认的地区语言
        vueI18n: {
          fallbackLocale: 'en', //回退策略,指定的locale中没有找到对应资源的情况下使用的locale
          messages: {
            //要渲染的信息,有多少语言就添加多少种
            en,
            // zh,
            jp,
            ru
          }
        }
      }
    ]
  ],

页面跳转

<nuxt-link
  v-for="item in menus"
  :key="item.key"
  :to="localePath(item.url)"
>
  {{ $t(item.name) }}
</nuxt-link>
this.$router.push(this.localePath(item.url))

切换语言

this.switchLocalePath('en') // 切换当前语言

获取locale信息

this.$i18n // 可以log这个看其结构
this.$i18n.localeProperties.code // 获取当前语言