在Vue3.0版本中我们如何使用Vue I18n 去实现页面国际化切换展示呢？
首先在vue2.0版本中是把I18n挂载到vue上面，可以通过this获取到I18n对象，而在vue3.0版本，没有this的用法了，我们页面逻辑基本都写在setup函数内，此函数的初始化是在其他组件选项之前调用的。
第一步：首先我们要安装一下Vue I18n
npm install vue-i18n or yarn add vue-i18n
第二步：在vue3.0的入口挂载
import VueI18n from './language'
const app = createApp(App)
app.user(VueI18n)
在三步：初始国际化配置
文件目录：
这里入口是index.ts文件，代码如下
import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh_CN'
import enUS from './lang/en'
const i18n = createI18n({
locale: 'zh_CN', // 默认显示语音
messages: {
'zh_CN': zhCN, // 中文
'en_US': enUS // 英文——美式
}
})
export default i18n
再看一下zh_CN.ts里面配置
export default {
header_menu: {
logout: '退出'
}
}
en.ts
export default {
header_menu: {
logout: '退出'
}
}
这样我们就可以在页面使用国际化配置了
<p> {{ $t('header_menu.logout') }} </p>
如何切换语言呢？找到一个简单的方式，通过vue3.0 提供的getCurrentInstance函数实现，这个函数允许访问对高级使用或库创建者有用的内部组件实例
模版中代码：
<span @click="setLang(1)">英文</span>
<span @click="setLang(2)">中文</span>
{{ $t('header_menu.logout') }}
js代码
import { getCurrentInstance } from 'vue'
export default {
setup() {
const { ctx } = getCurrentInstance()
function setLang(id) {
if (id === 1) {
ctx.$i18n.locale = 'en_US'
else {
ctx.$i18n.locale = 'zh_CN'
}
return { setLang }
}
根据上面的逻辑 点击哪个展示哪种语言
