Execute the following command to install the plug-vue vue-i18n internationalization
1 npm install vue-i18n --save
Execute the following command to install js-cookie
npm install js-cookie --save
New folder lang lang folder stored in the following language script src directory:
en.js
1 export default { 2 // 导航栏 3 linkArr: [ 4 {content: 'Homepage', id: 'HomePage'}, 5 {content: 'Product', id: 'Product'}, 6 {content: 'information', id: 'InforMation'}, 7 {content: 'AboutUs', id: 'About'}, 8 {content: 'JoinUs', id: 'Join'} 9 // {content: 'English', id: 'English'} 10 ] 11 }
zh.js
. 1 Export default { 2 // navigation bar . 3 linkArr: [ . 4 {Content: 'Home', ID: 'the HomePage' }, . 5 {Content: 'products', ID: 'Product' }, . 6 {Content: 'News' , ID: 'INFormation' }, . 7 {Content: 'About us', ID: 'the About' }, . 8 {Content: 'Join', ID: 'the Join' } . 9 // {Content: 'Dictionary Dictionary English', ID : 'Dictionary Dictionary English'} 10 ] . 11 }
index.js
1 import Vue from 'vue' 2 import VueI18n from 'vue-i18n' 3 import Cookies from 'js-cookie' 4 // import locale from 'element-ui/lib/locale'; 5 import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang 6 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang 7 import enLocale from './en' 8 import zhLocale from './zh' 9 10 Vue.use(VueI18n); 11 12 const messages = { 13 en: { 14 ...enLocale, 15 ...elementEnLocale 16 }, 17 zh: { 18 ...zhLocale, 19 ...elementZhLocale 20 } 21 }; 22 const i18n = new VueI18n({ 23 locale: Cookies.get('language') || 'en', 24 messages 25 }) 26 export default i18n
main.js
1 import Vue from 'vue' 2 import App from './App' 3 import router from './router' 4 import ElementUI from 'element-ui' 5 import 'element-ui/lib/theme-chalk/index.css' 6 import i18n from './lang' 7 8 Vue.use(ElementUI, { 9 size: 'medium', 10 i18n: (key, value) => i18n.t(key, value) 11 }); 12 13 new Vue({ 14 router, 15 store, 16 i18n, 17 render: h => h(App) 18 }).$mount("#app");
xxx.vue
1 <template> 2 <ul> 3 <router-link :to="{path: '/' + item.id}" v-for="(item,index) in $t('linkArr')" :key="index"> 4 <div class="line" v-if="5===index"></div> 5 </router-link> 6 <li @click="liClick1"> 7 <span>English</span> 8 </li> 9 </ul> 10 </template> 11 12 methods: { 13 liClick1() { 14 if (this.$i18n.locale === 'zh') { 15 the this $ i18n.locale = 'EN'. ; 16 // save the state to the global management of the new language . 17 the this $ store.dispatch ( 'update_current_lang', 'EN'. ); 18 is Cookie.set ( 'Language', 'EN ' ); . 19 } the else { 20 is the this . i18n.locale $ =' ZH ' ; 21 is // save the new language to manage global state 22 is the this $ store.dispatch (.' update_current_lang ',' ZH ' ); 23 is Cookie. SET ( 'Language', 'ZH' ); 24 } 25 } 26 is }