vue中使用 vue-i18n 切换中英文

偶尔写项目的时候页面中的导航栏会需要实现中英文内容切换，然后自己就参考一些百度文档写了下，自己项目中用到了，是可以实现的。（为了方便切换显示内容，我把内容写成了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>