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