vue 多語言 vue-i18n 按需加載，異步調用

http://kazupon.github.io/vue-i18n/zh/guide/lazy-loading.html

一次加載所有翻譯文件是過度和不必要的。

因為可能一直用中文，那么就不會用到英文的數據,就沒必要去加載。只在請求的時候去加載它

1.新建i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from '@/assets/language/zh'
import axios from 'axios'
Vue.use(VueI18n);

export const i18n = new VueI18n({
    locale: 'zh',
    // messages
    messages: {
        zh:zh.zh
    }
});

const loadedLanguages = ['zh']; //當前已經加載完全的語言
//en //jp
//切換的時候，根據語言加載各個國家的語言


function setI18nLanguage(lang){
    i18n.locale = lang;  
   //設置i18n的默認語言
    axios.defaults.headers.common['Accept-Language'] = lang; //設置ajax請求的語言
    document.querySelector('html').setAttribute('lang', lang) //設置html的語言
    return lang
}   

export function loadLanguageAsync (lang) {
    if (i18n.locale !== lang) { //如果傳入的變量 不等於 i18插件的語言值 (切換過一次，再切換第二次就不會再去加載一遍了)
        if(!loadedLanguages.includes(lang)){ //如果加載的這個語言不包含在默認加載的語言里面
            //就去異步加載它
            return import(`@/assets/language/${lang}`).then(msgs => { //去引入這個值
                i18n.setLocaleMessage(lang, msgs.default[lang]); 
                //設置i18n的語言message切換成這個
                loadedLanguages.push(lang); //本地已經加載的語言 加入 loadedLanguages
                return setI18nLanguage(lang);
                 //返回並且設置
            });

        } //如果傳入的語言變量值等於現在i18n控件的默認語言值 //不等於也會去設置
        return Promise.resolve(setI18nLanguage(lang)); //處理一些默認信息
    }
    return Promise.resolve(lang);
}

export default i18n;

2.zh.js. en.js寫對應英文的

module.exports = {
        zh: { 
         message: {
            title: '運動品牌',
           
           },
           placeholder: {
            enter: 'aaaa'
           },
           brands: {
              .....自己寫
           }
        }
    }

3.main.js 引入

import i18n from 'i18m.js'
Vue.use(VueI18n);
new Vue({
　　i18n
});

router.beforeEach((to, from, next) => {
  const lang = to.query.lang||'zh';
   loadLanguageAsync(lang).then(() => {next()})
});

攔截to的參數，不能寫from

4.多選下拉框

 <select v-model="lang">
        <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
 </select>

data(){
    return {
      langs: [
        'zh','en'
      ],
      lang: 'en'
    }
  },
  created(){
    const self = this;
    this.$nextTick(()=>{
      setTimeout(function(){
        self.lang = self.$route.query.lang;
      },100);
    });
   
  },
  watch:{
    lang(value){
      this.$router.push({
            path: `/?lang=${value}`
      });
    }
  }