vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3安装使用vue-i18n实时切换语言不用刷新

vue3中安装使用vue-i18n实时切换语言且不用刷新

作者:mrhaoxiaojun

这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

我使用的版本

"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.34",

安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用

1、main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { setupI18n } from '@/locales/setupI18n';

const app = createApp(App)

// 使用国际化i18n
app.use(setupI18n)

router.isReady().then(() => app.mount('#app'))

2、locales

import { App } from 'vue';
import { createI18n }  from 'vue-i18n'        //引入vue-i18n组件
import { messages } from './config';
import globalConfig from '@/config/index'

let {setting:{lang:defaultLang}} = globalConfig

//注册i8n实例并引入语言文件
const localeData = {
  legacy: false, // 使用CompotitionAPI必须添加这条.
  locale: defaultLang,
  messages, // 一个语言包对象,简单
  globalInjection: true
 }
 
// setup i18n instance with glob
export const setupI18n = {
  install (app: App) {
    const i18n = createI18n(localeData)
    app.use(i18n);
  }
}

config文件

import zh from './language/zh'
import en from './language/en'

// i18n本地语言包
export const messages = {
  'zh-CN': zh,
  'en-US': en
}
-------------------------
// zh文件,en同理
export default {
  menu: {
    home: '主页'
  }
}

3、国际化切换

<template>
  // select 国际化的一个下拉框
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n();

const handleChange = (value: Value) => {
    // ...
    // 这句话就是关键
  locale.value = value.value

};

</script>

4、最后使用

<template>
    {{t('menu.home')}}
</template>
<script lang ="ts" setup>
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n();
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文