vue 使用vue-i18n做全局中英文切换的方法

下面我就来详细讲解“vue 使用vue-i18n做全局中英文切换的方法”的完整攻略。

1. 准备工作

首先，需要在Vue项目中安装vue-i18n模块，可以通过npm命令行工具来安装。在终端中输入以下命令：

npm install vue-i18n --save

安装成功后，将在项目的node_modules文件夹中看到vue-i18n的相关文件。

2. 配置vue-i18n

在项目中的main.js文件中引入vue-i18n模块，并进行相关配置。示例如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'Hello world!'
    }
  },
  zh: {
    message: {
      hello: '你好，世界！'
    }
  }
}

const i18n = new VueI18n({
  locale: 'zh', // set locale
  messages // set locale messages
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

上述代码中，先引入VueI18n模块，并在Vue实例中使用。在messages对象中，分别定义了英文和中文对应的字符串，用en和zh分别表示。在VueI18n实例中，通过locale属性设置默认的语言。

3. 实现切换功能

在Vue组件中需要进行语言切换的地方，可以使用$i18n实例中的locale方法来实现，示例如下：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="toggleLanguage">Language</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleLanguage () {
      if (this.$i18n.locale === 'zh') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'zh'
      }
    }
  }
}
</script>

在上述示例中，通过$t方法来获取messages对象中的对应文本。同时，在按钮的点击事件中，切换$i18n实例的locale属性值从而实现中英文的切换。

4. 示例说明

下面是一个带有切换功能的完整代码示例：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="toggleLanguage">{{ language }}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      language: ''
    }
  },
  methods: {
    toggleLanguage () {
      if (this.$i18n.locale === 'zh') {
        this.$i18n.locale = 'en'
        this.language = '中文'
      } else {
        this.$i18n.locale = 'zh'
        this.language = 'English'
      }
    }
  },
  created () {
    if (this.$i18n.locale === 'zh') {
      this.language = 'English'
    } else {
      this.language = '中文'
    }
  }
}
</script>

<style>
button {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}
</style>

在这个示例中，根据$i18n实例的属性值来改变按钮的文本显示，初始化时按钮上面显示的是另一种语言。点击按钮时触发切换方法，同时改变按钮上的文本显示。

这两个示例基本上涵盖了实现vue使用vue-i18n做全局中英文切换的方法，开发者可以根据自己的情况进行参考和应用。