vue 使用vue-i18n做全局中英文切換的方法
更新時間：2018年10月29日 15:35:07 作者：Leepyng
這篇文章主要介紹了vue 使用vue-i18n做全局中英文切換的實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下
1、vue-i18n安裝
npm install vue-i18n --save-dev
2、在main.js文件中引入
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem('language')||'zh', //使用localStorage緩存到本地，當(dāng)下次使用時可默認(rèn)當(dāng)前使用語言
messages: {
' zh': require('./common/lang/zh'),
'en': require('./common/lang/en')
}
})
new Vue({
el: '#app',
router,
i18n,
template: '<App/>',
components: { App }
})
3、新建中英文語言文件
zh.js:
module.exports = {
language: {
name: 'English'
},
navbar: {
home: '首頁',
}
}
en.js:
module.exports = {
language: {
name: '中文'
},
navbar: {
home: 'Home',
}
}
4、創(chuàng)建一個切換語言方法（寫在App.vue可以全局控制）；
changeLang() {
let locale = localStorage.getItem('language')||'zh';
let temp=locale === 'zh' ? 'en' : 'zh';
this.$i18n.locale=temp;//改變當(dāng)前語言
localStorage.language=temp;
}
5、在template中的使用：
<p>{{ $t('language.name') }}</p>
<p>{{ $t('navbar.contact') }}</p>
總結(jié)
以上所述是小編給大家介紹的vue 使用vue-i18n做全局中英文切換的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
關(guān)于vue-cli 3配置打包優(yōu)化要點（推薦）
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue.js 是一套構(gòu)建用戶界面的漸進式框架。我們可以使用簡單的 API 來實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件。2017-03-03
這篇文章主要介紹了vue下history模式刷新后404錯誤解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了在vue中如何引入外部less文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了axios全局路由攔截的設(shè)置方法,axios全局路由代碼通常是在構(gòu)建axios實例注入的，本文通過實例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
vue3+vite多項目多模塊打包(基于vite-plugin-html插件)
這篇文章主要給大家介紹了關(guān)于vue3+vite基于vite-plugin-html插件實現(xiàn)多項目多模塊打包的相關(guān)資料,現(xiàn)在很多小伙伴都已經(jīng)使用Vite+Vue3開發(fā)項目了,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
偵聽器和計算屬性都可以用于偵聽響應(yīng)式數(shù)據(jù)的變化,如果需要在數(shù)據(jù)變化后執(zhí)行操作,修改依賴項,那么就應(yīng)該使用偵聽器,下面就跟隨小編一起來學(xué)習(xí)一下vue3中偵聽器的使用吧2023-09-09
這篇文章主要給大家介紹了關(guān)于vue+echarts實現(xiàn)折線圖的方法與注意事項，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12
Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制代碼
這篇文章給大家介紹了vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制方法,文中有詳細(xì)完整的代碼示例攻大家參考,對大家的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-10-10