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

分手后的思念是犯贱 2022-09-04 01:58 128阅读 0赞

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

*  使用 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;