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ǔ)言方法（寫(xiě)在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)文章
這篇文章主要介紹了詳解vue頁(yè)面首次加載緩慢原因及解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-router實(shí)現(xiàn)tab標(biāo)簽頁(yè)（單頁(yè)面）詳解
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)tab標(biāo)簽頁(yè)的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開(kāi)始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
vue中將el-switch值true、false改為number類(lèi)型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類(lèi)型的1和0問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過(guò)對(duì)象或函數(shù)修改配置,簡(jiǎn)單直接；chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開(kāi)發(fā)者優(yōu)化項(xiàng)目構(gòu)建2024-10-10
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為word的兩種方法代碼
在前端開(kāi)發(fā)中我們常常需要將頁(yè)面頁(yè)面為word文件,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為word的兩種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
在Vue應(yīng)用中，通常需要將一些狀態(tài)進(jìn)行持久化，以便在用戶關(guān)閉瀏覽器或刷新頁(yè)面后，常見(jiàn)的方法就是LocalStorage和SessionStorage，所以本文就來(lái)講講這兩種方法的具體實(shí)現(xiàn)吧2023-06-06