在Vue3.0版本中我們?nèi)绾问褂?a target="_blank">Vue I18n?去實現(xiàn)頁面國際化切換展示呢？
? ? ? 首先在vue2.0版本中是把I18n掛載到vue上面，可以通過this獲取到I18n對象，而在vue3.0版本厉颤，沒有this的用法了榴啸，我們頁面邏輯基本都寫在setup函數(shù)內(nèi)，此函數(shù)的初始化是在其他組件選項之前調(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)
在三步：初始國際化配置
文件目錄：
這里入口是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函數(shù)實現(xiàn)河狐，這個函數(shù)允許訪問對高級使用或庫創(chuàng)建者有用的內(nèi)部組件實例
模版中代碼：
<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ù)上面的邏輯 點擊哪個展示哪種語言
