【VUE】i18n实现全局化的一些思路

项目中频繁用到中英文切换 导致一个全局的 控制中英文的 中心化操作显得非常紧要，
但是由于不确定因素导致迟迟未能去开始这一切，接下来我将对这些因素逐个分析，并且实现
中心控制中英文...

• 使用 localstorage 全局储存中英文

如何在页面不需要的时候 将语言设置为中文
哪些操作需要进行语言的清除呢…

1.从用户的角度来看，我从登录到下线…都只会用一种语言
那么我们要确保的是这种语言 “不间断” … 就是说 我切换页面等…不会影响语言的视觉感官.
所以我们可以在 “登录” 时选择将语言 “重置”.

有些页面可能公用了 翻译文件的一些东西 ，这些我们称为公用 …
其引起的就是 … 当我们使用另外一种不用翻译的身份登录时… 或者在已经切换了语言的环境下进入时
它会显示为已经切换的语言，但是我们其实不需要它翻译… 而且页面也缺少翻译功能…
这时候我们改怎么做… 我能想到的就是… 在这个页面重置语言。

操作过程

一个切换语言的全局函数全局

0.在main.js中定义
1.当切换为中文时，判断当前页面是否是 英文首页 是 -- 跳转中文首页  否 --- 翻译
2.当切换为英文时，判断当前页面是否是 中文首页 是 -- 跳转英文首页 否 --- 翻译
3.储存语言

  Vue.prototype.$switchLan = function(){
  	console.log('i18nb-->',router);
    let currentLan = i18n.locale; //当前环境
    if (currentLan == "zh-CN") {
      //中文切换英文
      if (router.currentRoute.path == "/") {
        //首页的话 跳转 英文首页
        let routeData = router.resolve({
          name: "EnglishHome",
        });
        window.open(routeData.href, "_blank");
      } else {
        //除了首页 其他都翻译
        let lang = "en-US";
        i18n.locale = lang; //关键语句
      }
      // 储存语言
      localStorage.setItem('lan','en-US')
    } else {
      // 英文切换中文
      if (router.currentRoute.path == "/EnglishHome") {
        router.push("/");
      } else {
        let lang = "zh-CN";
        $i18n.locale = lang; //关键语句
      }
      localStorage.setItem('lan','zh-CN')
    }
}

页面中使用

let lan = localStorage.getItem("lan");
this.$i18n.locale = lan;