小編給大家分享一下vue怎么使用vue-i18n做全局中英文切換，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到仙居網(wǎng)站設(shè)計(jì)與仙居網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋仙居地區(qū)。為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

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: '',
　　　　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中的使用：　

　
{{ $t('language.name') }}
　　
{{ $t('navbar.contact') }}

看完了這篇文章，相信你對(duì)“vue怎么使用vue-i18n做全局中英文切換”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站題目：vue怎么使用vue-i18n做全局中英文切換-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.xueling.net.cn/article/dppdpp.html