偶尔写项目的时候页面中的导航栏会需要实现中英文内容切换,然后自己就参考一些百度文档写了下,自己项目中用到了,是可以实现的。(为了方便切换显示内容,我把内容写成了data数据)
先安装
npm install vue-i18n
然后在 main.js 中引入 vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue.config.productionTip = false
let bus = new Vue()
Vue.prototype.bus = bus
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': require('./assets/js/zh'),
'en': require('./assets/js/en')
}
})
new Vue({
el: '#app',
router,
i18n,
components: {
App
},
template: '<App/>'
})
//以上红色文字内容都是需要引用的
然后(在项目下的src目录下的assets的js下)新建两个js文件,一个en.js ,一个zh.js (一个放中文,一个放英文)
//en.js
module.exports = { language: { name: '英文' }, navbar: { jtgk: [ { gsimg: require('../../../static/img/fesco.png'), biaoti: 'FESCO', wenzi: 'Beijing Foreign Enterprise Human Resources ' gd: 'MORE' }, { gsimg: require('../../../static/img/lhyw.png'), biaoti: 'UMP', wenzi: 'Hong Kong Chow Tai Fus company,', path: '/jtgk?page=1&fesco=1#aboat', gd: 'MORE' } ] } }
//中文
module.exports = { language: { name: '中文' }, navbar: { jtgk: [ { gsimg: require('../../../static/img/fesco.png'), biaoti: 'FESCO', wenzi: '北京外企人力资源服务有限公司(FESCO)成立于1979年,是开创中国人力资源服务行业的第一家企业,', path: '/jtgk?page=1&fesco=0#aboat', gd: '查看更多' }, { gsimg: require('../../../static/img/lhyw.png'), biaoti: '联合医务', wenzi: ' 香港周大福旗下企业,香港主板上市公司(HK00722)联合医务', path: '/jtgk?page=1&fesco=1#aboat', gd: '查看更多' } ] } }
然后在含有 '中英文'的页面中写一些方法
<template>
<li @click=
"
changeLang(), zyqh? zyqh = false: zyqh = true
">
<span class="rr" :class="{ zyw: zyqh }">中文</span> //控制文字的颜色 <span :class="{ zyw : !zyqh }"> | ENGLISH</span> </li>
</template>
<script>
export default {
name: '',
data () {
return {
zyqh: true,
methods: {
changeLang () {
let locale = this.$i18n.locale
locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
console.log(locale)
}
}
}
</script>
<style lang="scss" scoped>
.zyw {
color: #d91a21;
}
</style>
页面中的大部分已经写完了,然后只需要找到实现中英文内容切换的地方,数据显示出来即可
<div class="pic_1"> <div class="js_img" v-for="(item,i) in $t('navbar.jtgk')" :key="i" @click="$router.push({path: item.path})"> //注意红色文字部分 <img :src="item.gsimg" alt=""> <span class="img_name">{{item.biaoti}}</span> <div class="bj_img"> <img src="../../static/img/zhezhao.png" alt=""> <div class="text"> <h4>{{item.biaoti}}</h4> <div class="wz"> <p>{{item.wenzi}}</p> </div> <p class="gd"> <span>{{item.gd}}</span> <span><img src="../../static/img/jtred.png" alt=""></span> </p> </div> </div> </div> </div>