vue项目如何控制页面只能在浏览器打开一个窗口，多个窗口时关闭当前新开的窗口

代码中的数字123，代表我写代码时候的思考思路，可以跟着数字去理解代码（菜鸟自研，代码虽烂，但功能齐全）

一.在app.vue的mounted中添加

1.当有窗口后进行缓存，当有第二个相同的项目在浏览器窗口打开时，根据这个作为判断的条件之一，去进行关闭

2.只需要一个isOpen判断的话，如果只打开了一个窗口，第一次是正常的，但是如果强制刷新，isOpen也会存在，所以刷新的时候也会被判断已经打开相同窗口，reload就是用来判断是否当前是刷新状态

3.监听页面刷新触发事件，在方法中存上我们的reload

4.刷新储存的属性需要删除掉，不然新开第二个窗口的时候，里面也会同时有reload和isopen,这样你新开的窗口就会是刷新的判断，就不会被关闭

5.这里进行持续储存的原因是，当你新打开第二个窗口，然后判断到当前已经有重复窗口打开，然后你强制关闭了重复打开的窗口，那个这个时候，你储存的isOpen就会执行下面页面销毁时执行的方法，会删除掉isOpen，当你继续打开新的窗口的时候，这个时候就会正常打开，然后继续打开第四次窗口的时候又可以正常关闭（偶数次都可以正常关闭，基数次数都无法关闭），所以就需要让原本打开的第一个窗口，一直储存着isOpen

6.当页面更换地址的时候，也会触发页面刷新的函数，所以关闭的时候把reload清理掉

7.这一步是上线以后发现的问题，当用户打开页面的时候，直接点击关机，这个时候，页面的销毁函数不会执行，缓存也不会被清除，所以isOpen就会在开机的之后，一直存在，陷入打不开页面的循环，所以我们可以先清除一遍，如果有存在的页面，那么会一直储存isopen，如果清除之后，没有isopen，那就说明当前没有多余的页面，就刷新一下当前页面，不做关闭操作

 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))   //3
    let isOpen = localStorage.getItem('isOpen')//1
    let reload = localStorage.getItem('reload')//2
    this.timer2=setTimeout(() => {
      localStorage.removeItem('reload')//4
    }, 2000);
    console.log(isOpen, reload,  isOpen == 'open', reload != 'reload', 'reload');
    if (isOpen == 'open' && reload != 'reload') {
 localStorage.removeItem('isOpen')
      localStorage.removeItem('reload')
     this.timer3= setTimeout(() => {
        let open1=localStorage.getItem('isOpen')//7
        let load1=localStorage.getItem('reload')
        if (open1 == 'open'&&load1!=='reload') {
          this.$alert('网站重复打开即将关闭', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
         this.timer4= setTimeout(() => {
            window.opener = null;
            location.href = "about:blank";
            window.close();
            localStorage.removeItem('reload')
            localStorage.removeItem('isOpen')//6
          }, 2000)
        }else{
          history.go(0)
        }

      }, 1000)
    } else {
      setInterval(() => {
        localStorage.setItem('isOpen', 'open')//5
      }, 1000);
    }

二.在methods中

 beforeunloadHandler(e) {    //根据事件进行操作进行操作
      console.log(e)
      console.log('浏览器刷新')
      localStorage.setItem('reload', 'reload')
    },

三.在页面销毁的函数中

 destroyed() {  //进行监听销毁
    localStorage.removeItem('isOpen')
    localStorage.removeItem('reload')
    clearTimeout(this.timer2)
    clearTimeout(this.timer3)
    clearTimeout(this.timer4)
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },