How to switch national language in Vue

This time I will show you how to switch the national language in Vue, and what are the precautions for switching the national language in Vue. The following is a practical case, let's take a look.

In the development process based on vue-cli project, the multi-language switching function can use the vue-i18 plug-in. The specific implementation method is as follows:

step1: Install vue-i18 in the project Plug-in

cnpm install vue-i18n --save-dev

step2: Introduce the vue-i18n plug-in into the project’s entry file main.js

import Vue from 'vue' 
import router from './router' 
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: 'zh', // 语言标识 
 messages: { 
  'zh': require('./assets/lang/zh'), 
  'en': require('./assets/lang/en') 
 } 
}) 
// vue实例中引入 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 i18n, 
 router, 
 template: '<Layout/>', 
 components: { 
  Layout 
 }, 
})

step3: Use ## in the page

#When used in templates, there are probably the following three situations. If there are any omissions, please correct me

zh.js

module.exports = { 
 menu : { 
   home:"首页" 
 }, 
 content:{ 
   main:"这里是内容" 
 } 
}

en.js

module.exports = { 
 menu : { 
   home:"home" 
 }, 
 content:{ 
   main:"this is content" 
 } 
}

1) As the text content in the tag

<p class="title">{{$t('menu.home')}}</p>

2) As the tag attribute, use

<input :placeholder="$t(&#39;content.main&#39;)" type="text">

3) When using it as js Chinese text

console.log(this.$t('content.main'));

4) To be added ...

step4: Switch between Chinese and English on the page, and bind events to the button for switching between Chinese and English, as follows:

tabEn: function () { 
 this.$i18n.locale = 'en' 
}, 
tabCn: function () { 
 this.$i18n.locale = 'zh' 
}

At this point, the use of the vue-i18n plug-in is completed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to get the absolute position of the DOM element in the front-end interface

How to optimize Angular code

The above is the detailed content of How to switch national language in Vue. For more information, please follow other related articles on the PHP Chinese website!