vue根據按鈕進行中英文切換

剛學習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>