Home > Article > Web Front-end > Steps to use the vue-i18n standard
This time I will bring you the steps to use the vue-i18n standard. What are the precautions when using the vue-i18n standard? The following is a practical case, let’s take a look.
Requirements
Company projects need to be internationalized, click the button to switch Chinese/English
1, Installation
npm install vue-i18n --save
2. Inject into the vue instance and implement calling api and template syntax in the project
import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN': require('./common/lang/zh'), // 中文语言包 'en-US': require('./common/lang/en') // 英文语言包 } }) new Vue({ el: '#app', i18n, // 最后 router, template: '<App/>', components: { App } })
3. Corresponding language package
zh.js Chinese language package:
export const lang = { homeOverview:'首页概览', firmOverview:'公司概述', firmReports:'财务报表', firmAppendix:'更多附录', firmIndex:'主要财务指标', firmAnalysis:'对比分析', firmNews:'新闻事件档案', firmOther:'其他功能', }
en.js English language package:
export const lang = { homeOverview:'Home overview', firmOverview:'firmOverview', firmReports:'firmReports', firmAppendix:'firmAppendix', firmIndex:'firmIndex', firmAnalysis:'firmAnalysis', firmNews:'firmNews', firmOther:'firmOther' }
4. Button control to switch language
this.$i18n.locale, when you assign the value to 'zh-CN', the Navigation column becomes Chinese; when the value is assigned to 'en-US', it becomes English:
<p class="top_btn" @click="changeLangEvent">中文</p>
changeLangEvent() { console.log('changeLangEvent'); this.$confirm('确定切换语言吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { if ( this.$i18n.locale === 'zh-CN' ) { this.$i18n.locale = 'en-US';//关键语句 console.log('en-US') }else { this.$i18n.locale = 'zh-CN';//关键语句 console.log('zh-CN') } }).catch(() => { console.log('catch'); this.$message({ type: 'info', }); }); }
Static rendering:
<span v-text="$t('lang .homeOverview')"></span> <span>{{$t('lang .homeOverview')}}</span>
If it is element-ui, please Add a colon in front of the translation
For example: label="user name" is changed to: label="$t('order.userName')"
Dynamic rendering:
<span class="el-dropdown-link">{{navCompany}}</span> computed:{ navCompany:function(){ if(this.nav_company){ let str = 'lang'+this.nav_company; return this.$t(str); } } }, <el-submenu v-for="(value, title1, one) in navList" :key="one+1" :index="(one+1).toString()"> <template slot="title"> <router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link> </template> </el-submenu> methods: { getTitle(title){ let str = 'lang.'+title; return this.$t(str); } }
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:
Tips for using WeChat applet login authentication
vue-router’s scaffolding usage
The above is the detailed content of Steps to use the vue-i18n standard. For more information, please follow other related articles on the PHP Chinese website!