vue根据按钮进行中英文切换

Posted 2020-11-24 jlfw

刚学习vue不久，所以对vue了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。
内容如下，希望对大家有帮助。
安装 vue-i18n插件npm install vue-i18n

1.首先是引进i18n

1.首先是引进i18n

然后在index.js中

import VueI18n from ‘vue-i18n‘
import Vue from ‘vue‘

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: ‘cn‘,    // 语言标识
    messages: {
        ‘cn‘: require(‘./lang/cn‘),   // 中文语言包
        ‘en‘: require(‘./lang/en‘)    // 英文语言包
    },
})

export default  i18n

cn.js以及en.js中写入需要用到的中英文翻译内容
在main,import i18n from ‘./i18n‘ //引入配置文件

new Vue({
  el: ‘#app‘,
  router,
  store,
    i18n: i18n,
  render: h => h(App)
})

2.在用到英文切换的模板中添加

由于此项目是在中文状态下默认显示英文按钮，在英文状态下显示中文按妞，所以这里的代码如下
（1）导航处

<span class="label label-important"  :key="locale?‘en‘:‘cn‘" @click="changeLang()">{{lang}}</span>

静态文案的地方

<li>
<router-link to="/indexCon">{{ $t("message.index") }}</router-link>
</li>
//{{ $t("message.index") }}放你需要的翻译的内容

此项目中由于后端要求中英文返回的值为0和1，所以此处用到了$cookie

<script>
    export default {
      data () {
        return {
          locale: ‘cn‘,
          lang:‘ENG‘
        }
      },
      methods: {
         changeLang () {
          // 增加传入语言
              if(this.locale==‘cn‘){
                  this.lang=‘ENG‘;
                        this.locale=‘en‘;
                    }else{
                        this.lang=‘中文‘;
                        this.locale=‘cn‘;
                    }
          this.$cookie.set(‘lng‘, this.locale==‘cn‘?‘0‘:‘1‘, 1);
          window.location.reload();//进行刷新改变cookie里的值
        }
        
      },
      mounted() {
              if(this.$cookie.get(‘lng‘)==‘0‘){
                    this.locale=‘cn‘;
                    this.lang=‘ENG‘;
                }else{
                    this.locale=‘en‘;
                        this.lang=‘中文‘;
                }
                this.$cookie.set(‘lng‘, this.locale==‘cn‘?‘0‘:‘1‘, 1);
      },
      watch: {
        locale (val) {
          this.$i18n.locale = val;
          console.log("locale",val);
        }       
      }
    }
</script>