vue3使用vue-i18n 切换语言

Vue3 中使用 Vue I18n 进行国际化的切换通常需要以下几个步骤：

1. 安装依赖：首先安装 `vue-i18n` 和相关的插件，如 `@vue/composition-api` 或者 `vue-class-component`，取决于你的项目结构和组件化方案。

   npm install vue-i18n @vue/composition-api --save

2. 初始化 i18n：在项目根目录创建一个 `.js` 文件，比如 `i18n.js`，配置默认的语言和翻译资源。

   import { createI18n } from 'vue-i18n'
   
   const messages = {
     en: {
       hello: 'Hello',
       world: 'World'
     },
     zh: {
       hello: '你好',
       world: '世界'
     }
   }

   const i18n = createI18n({
     locale: 'en', // 默认语言
     fallbackLocale: 'en', // 当检测到的语言不可用时使用的备用语言
     messages
   })
   
   export default i18n

3. 在组件中使用国际化：导入并注入 `i18n` 到组件的 props 或者通过 composition API 使用。

- 使用 prop：

     <template>
       <div>{{ $t('hello') }}</div>
     </template>

     <script>
       export default {
         props: ['i18n'],
         setup(props) {
           return { t: props.i18n.t };
         }
       }
     </script>

- 使用 composition API (如果使用的是 Vue 3 Composition API)：

     import { computed } from '@vue/composition-api';

     export default {
       setup() {
         const t = computed(() => this.$i18n.t);

         // 在模板中调用
         return {
           sayHello: () => t('hello')
         };
       }
     }

4. 切换语言：你可以通过设置 `locale` 属性或者使用全局方法来切换语言。

- 设置全局语言：

     Vue.prototype.$i18n.locale = 'zh';

- 按需切换：

     function switchLanguage(newLang) {
       this.$i18n.locale = newLang;
     }

5. 考虑国际化路由：对于单页面应用，可以配合 `vue-router` 的导航守卫，在用户切换语言时更新 URL 并重新加载对应的语言内容。

完成以上步骤后，用户就可以通过点击或手动更改设置来切换应用中的语言了。