vue3中安裝使用vue-i18n實時切換語言且不用刷新

更新時間：2023年04月19日 09:09:07 作者：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>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

用v-html解決Vue.js渲染中html標簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標簽不能被解析，html標簽顯示為字符串的問題，文中通過圖文介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-12-12
詳解Vue的七種傳值方式
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
基于axios請求封裝的vue應用實例代碼
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
vue2+element-ui使用vue-i18n進行國際化的多語言/國際化詳細教程
這篇文章主要給大家介紹了關于vue2+element-ui使用vue-i18n進行國際化的多語言/國際化的相關資料,I18n是Vue.js的國際化插件,項目里面的中英文等多語言切換會使用到這個東西,需要的朋友可以參考下
2023-12-12
$vue文本識別"\n"換行問題的解決方式$
vue文本識別"\n"換行問題的解決方式
在頁面中經常會遇到自定義文本,如果文本過長就需要換行,在HTML中可以通過標簽換行,也可以通過\n轉椅字符換行,下面這篇文章主要給大家介紹了關于vue文本識別“\n”換行問題的解決方式,需要的朋友可以參考下
2022-11-11
vue實現錨點跳轉及滾動監(jiān)聽的方法
這篇文章主要為大家詳細介紹了vue實現錨點跳轉及滾動監(jiān)聽的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue3父子組件相互調用方法舉例詳解
這篇文章主要給大家介紹了關于Vue3父子組件相互調用方法的相關資料,vue中我們常常用到組件,那么組件中互相調用也是經常遇到的,需要的朋友可以參考下
2023-08-08
Vue中$bus的用法及$on、$off的使用說明
這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue.js element-ui validate中代碼不執(zhí)行問題解決方法
這篇文章主要介紹了vue.js element-ui validate中代碼不執(zhí)行問題解決方法,需要的朋友可以參考下
2017-12-12
淺談Vue 數據響應式原理
這篇文章主要介紹了淺談Vue 數據響應式原理，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05