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

前提条件：

对以下文章代码进行修复【本文章为转载与修复已知问题】

版权声明：本文为CSDN博主「my_tm」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：

vue项目如何控制页面只能在浏览器打开一个窗口，多个窗口时关闭当前新开的窗口_layu 当有第二个相同的项目在浏览器窗口打开时,去进行关闭-CSDN博客

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

一.在app.vue的mounted中添加

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

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

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

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

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

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

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

export default {
    data() {
        return {
            timer2: null,
            timer3: null,
            timer4: null,
            timer5: null,
        }
    },

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

    created() {
        window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e)) // 3
        const isOpen = localStorage.getItem('isOpen') // 1
        const 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(() => {
                const open1 = localStorage.getItem('isOpen') // 7
                const load1 = localStorage.getItem('reload')
                if (open1 == 'open' && load1 !== 'reload') {
                    this.$alert('网站重复打开即将关闭', {
                        confirmButtonText: '确定',
                        callback: (action) => {}
                    })
                    this.timer4 = setTimeout(() => {
                        window.opener = null
                        location.href = '/'
                        window.close()
                        localStorage.removeItem('reload')
                        localStorage.removeItem('isOpen') // 6
                    }, 2000)
                } else {
                    history.go(0)
                }
            }, 1000)
        } else {
            this.timer5 = setInterval(() => {
                localStorage.setItem('isOpen', 'open') // 5
                console.log(5)
            }, 1000)
        }
    },

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