监听浏览器以及微信浏览器关闭、刷新事件

    需要注意
    发送数据请求需要使用ajax 同步模式async:false；axios为异步请求 个人测试使用async/await无效（ps：如果有axios的解决方案希望可以指教...）

关闭事件调试接口暂时发现需要避免谷歌、以及微信开发者工具 请求会失败debugger发现关闭之后进入了error 报错原因是跨域。

进入时间有两种处理方式
  1刷新页面不重置停留时间 这种情况需要存session拿到第一次打开页面的进入时间
  2.刷新页面 重置停留时间 这种情况直接获取进入时间 关闭页面时获取关闭时的时间

<template>
    <div class="home">
        <p>{{title}}</p>
        {{reqText}}
    </div>
</template>

<script>
    // @ is an alias to /src
    import $ from 'jquery'

    export default {
        name: 'Home',
        data() {
            return {
                title: localStorage.getItem('ua'),
                beforeUnloadTime: '',
                reqText: localStorage.getItem('req'),
                gapTime:''
            }
        },
        created() {
        },
        mounted() {
            // 判断是否是微信浏览器
            let ua = window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
            ua = ua !== null ? ua[0] : null;
            console.log(ua)
            if (ua === "micromessenger") {
                window.addEventListener('pagehide', e => this.beforeunloadHandler(e))
                window.addEventListener('unload', e => this.unloadHandler(e))
            } else {
                // 监听普通页面离开事件
                window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
                window.addEventListener('unload', e => this.unloadHandler(e))
            }
        },
        destroyed() {

       // 销毁监听的关闭事件
            window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
            window.removeEventListener('pagehide', e => this.beforeunloadHandler(e))
            window.removeEventListener('unload', e => this.unloadHandler(e))
        },
        methods: {
         timeDate(){
           //处理进入事件，停留时间，离开时间的函数
         },
            beforeunloadHandler(e) {
                console.log(e);
                this.beforeUnloadTime = new Date().getTime();
            },
            unloadHandler(e) {
                // 这里调用时间函数确保记录时间的准确性
                this.timeDate()
                console.log(e);
                this.gapTime = new Date().getTime() - this.beforeUnloadTime;
                //判断是窗口关闭还是刷新
                if (this.gapTime <= 5) {
                    localStorage.setItem('ua','true')
                    $.ajax({
                        url: '/api/demo',
                        type: 'get',
                        async: false, //或false,是否异步
                        success: function (res) {
                            console.log(res)
                            localStorage.setItem('reqs', JSON.stringify(res))
                        },
                        error:function (res) {
                            console.log(res)
                            localStorage.setItem('reqs', JSON.stringify(res))
                        }
                    })
                }
            }
        }
    }
</script>

vue.config.js

module.exports = {
    devServer: {
   // mock 假数据 模拟真实的接口请求 这里是webpack内置的express
        before: app => {
            app.get("/api/demo", (req, res) => {
                res.json({
                    title: 'name'
                })
            })
        }
    }
}

补充关于vue注销监听事件的写法  上面的写法会出现路由跳转后其他页面也会有关闭监听的情况



    //添加beforeunload监听事件
        createBeforeunloadHandler() {
            //window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
            window.addEventListener('beforeunload', this.beforeunloadHandler, false);
        },
        //移除beforeunload事件
        destroyedBeforeunloadHandler() {
            //window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));//错误方法，无法移除
            window.removeEventListener('beforeunload', this.beforeunloadHandler, false);
            //this.rowEditEnable = 0;
        },
        //beforeunload监听事件
        beforeunloadHandler(e) {
                e.returnValue = "确定要关闭窗口吗？";
                console.log("释放权限操作");
                //释放权限操作，无阻塞
                //用户点击取消后执行，恢复操作
                setTimeout(function () {
                         setTimeout(function () {
    　　　　　　　　　　　　　　　　console.log("恢复用户权限操作");
    　　　　　　　　　　　　　　}, 50)
                }, 50);
        },
     },
     beforeDestroy() {
        //在 beforeDestroy 钩子移除beforeunload事件
        this.destroyedBeforeunloadHandler();
     },