实现浏览器版本提醒功能

需求：用户在浏览器中输入url后，判读是否符合我们系统支持的浏览器(chrome,firefox,safari)，若不符合则跳转至浏览器版本提醒页面
实现：该系统所用的前端框架是vue，默认页面是/login，因此在login.vue文件中的created（）钩子函数中对浏览器版本进行判断

1. created（）

created () {
  let browserType = this.BrowserType()
  console.log(browserType)
  if(browserType != "FF" && browserType != "Chrome" && browserType != "Safari"){
    console.log("判断浏览器版本")
    this.$router.push('/browserVersionReminder')
  }
  this.$db.clear()
  this.$router.options.routes = []
},

2. BrowserType()

BrowserType(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
  var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
  var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
  var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
  if (isIE) {return "IE"}//isIE end
  if (isFF) { return "FF";}
  if (isOpera) { return "Opera";}
  if (isSafari) { return "Safari";}
  if (isChrome) { return "Chrome";}
  if (isEdge) { return "Edge";}
}

3. 效果
   
   点击图标跳转至下载页面：

window.open("https://www.google.cn/chrome/",'_blank')