在Vue3.0版本中我們?nèi)绾问褂?a target="_blank">Vue I18n?去實(shí)現(xiàn)頁(yè)面國(guó)際化切換展示呢？
? ? ? 首先在vue2.0版本中是把I18n掛載到vue上面，可以通過(guò)this獲取到I18n對(duì)象，而在vue3.0版本，沒(méi)有this的用法了，我們頁(yè)面邏輯基本都寫(xiě)在setup函數(shù)內(nèi)，此函數(shù)的初始化是在其他組件選項(xiàng)之前調(diào)用的。
第一步：首先我們要安裝一下Vue I18n
npm install vue-i18n? ?or? ??yarn add?vue-i18n
第二步：在vue3.0的入口掛載
import VueI18n from './language'
const app = createApp(App)
app.user(VueI18n)
在三步：初始國(guó)際化配置
文件目錄：
這里入口是index.ts文件，代碼如下
import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh_CN'
import enUS from './lang/en'
const i18n = createI18n({
? ? ? locale: 'zh_CN', // 默認(rèn)顯示語(yǔ)音
? ? ? 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: '退出'
? ? ?}
}
這樣我們就可以在頁(yè)面使用國(guó)際化配置了
<p>?{{ $t('header_menu.logout') }} </p>
如何切換語(yǔ)言呢？找到一個(gè)簡(jiǎn)單的方式，通過(guò)vue3.0 提供的getCurrentInstance函數(shù)實(shí)現(xiàn)，這個(gè)函數(shù)允許訪問(wèn)對(duì)高級(jí)使用或庫(kù)創(chuàng)建者有用的內(nèi)部組件實(shí)例
模版中代碼：
<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 }
? ? ? ? ?}
根據(jù)上面的邏輯 點(diǎn)擊哪個(gè)展示哪種語(yǔ)言
