关于在浏览器中监听用户点击返回键

前端时间做了个需求，是关于监听用户点击实体返回键出现挽留弹窗的需求

        做过混合开发的都知道，要在自己的app内监听返回事件是很简单的，但是在浏览器中呢，我们知道用onbeforeunload也可以监听用户刷新或者关闭页面，但是这种方式弹出的对话框是浏览器默认的，不能更改样式

        先说下，我们的工程是基于vue进行的开发，所以这里有种方法就是在当前页面的mounted生命周期中加入一个this.$router.push('?dialog=true')方法，我们知道，此时对于浏览器的history来说打开了两个页面，但是在我们页面效果上来看还是在当前页面没有进行多余跳转，然后再用this.$watch去监听this.$route.query('dialog')(不是$router)去监听路由中的参数状态（前面push添加的）

        当用户点击返回按钮的时候history会返回上一层，也就是不带dialog参数的url，但实际上页面没有发生改变，此时会触发watch监听，这时候我们可以在里面触发我们自己的弹窗

        方法存在问题

1：有的浏览器进入页面之后用户如果不在页面做任何操作（如点击，滑动，聚焦）直接点击返回键会触发url的变化（页面依旧停留在当前页面），但是不会触发watch监听；而且这种现象也跟你大开url的方式有关系，你如果是通过短信或者其他方式直接点击url进入的话好像不会存在上诉情况，但是如果是同在地址栏输入url进入页面的话就会存在上诉情况，原因暂时没搞明白，有知道的大神可以指导一下

2：其实这种方式也是不能只能软性拦截用户一次，也就是说用户在出现弹窗的时候再次点击返回是可以直接关闭页面的

说明一下，这个需求是同事指导了下做出来的，所以可能会有些细节错误，但总体思路就是这样，

如果不是vue框架做的应该也是可以通过监听history实例变化做到类似效果的