问题描述
对于表单填写信息的页面，有时候会出现用户填写了一部分不小心“离开”了这个页面，那么这个时候，产品说，需要再做一个用户提示，问问用户是不是真的要离开这个页面。针对于这个需求，我们把具体“离开”的方式分为两种情况
情况一 离开当前路由页面去到别的路由页面
这种情况比较好处理，就是直接判断表单填写的信息是否变化了，如果变化了，做个弹框询问一下，没变化直接放行。或者使用beforeRouteLeave钩子做控制。比如我之前的文章：https://juejin.cn/post/6932100597789245448
情况二 直接关闭浏览器tab标签页或关闭浏览器
对于这种情况下（比如是误操作），那么我们可以使用浏览器自带的onbeforeunload事件去做控制
onbeforeunload事件
onbeforeunload还有两个兄弟，这里一块介绍下
onload、和onbeforeunload、和onunload介绍
我们先看一下浏览器自带的三个比较常见的事件
- onload（网页加载完毕后立刻执行的操作，很像vue的mounted钩子）
- onbeforeunload（网页卸载之前的操作，很像vue的beforeDestroy钩子）
- onunload（网页卸载了的操作，很像vue的destroyed钩子，与destroyed不同的是，onunload如果是刷新页面的话，onunload执行完以后，又会重新加载页面即：DOM树+CSSOM=>render tree...这样的操作）
onload、onbeforeunload、onunload执行顺序
注意一下它们三个的执行顺序
- 当我们打开页面看到网页内容的时候，其实
onload已经执行完毕了 - 当我们关闭页面的时候，会先触发
onbeforeunload事件的执行 - 当我们刷新页面的时候，会:
onbeforeunload --> onunload --> onload
vue中的onbeforeunload写法
<template>
<div class="wrap123">
<h2>我是表单填写页面</h2>
</div>
</template>
<script>
export default {
mounted() {
// 存一份this
let _this = this;
window.onbeforeunload = function(e) {
// 那个路由页面需要，就把path的名字修改成那个，比如我当前页面的path是/vue
if (_this.$route.path == "/vue") {
// 兼容IE8和Firefox 4之前的事件对象写法（不加也行，现在少有项目兼容老版本浏览器了）
e = e || window.event;
if (e) {
e.returnValue = "returnValue属性值的文字不能自定义，写不写都行的";
}
// Chrome支持, Safari支持, Firefox 4版本以后支持, Opera 12版本以后支持 , IE 9版本以后支持
return "returnValue属性值的文字不能自定义，写不写都行的";
}
};
},
beforeDestroy() {
// 离开页面时候再清除
window.onbeforeunload = () => {};
}
};
</script>
<style lang="less" scoped>
.wrap123 {
width: 600px;
height: 400px;
}
</style>
浏览器效果图
当我们刷新或者关闭浏览器的时候，就会出现下图这样的效果
长得都差不多...
注意事项
- 提示框的样式无法修改，只能用自带的弹框
- 提示框的文字e.returnValue也无法自定义，至于写的原因是因为：onbeforeunload函数中应当将一个说明字符串赋值给
Event对象的returnValue属性，并return出去，这样才会触发浏览器自带的确认离开弹框出现
MDN官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunloadw3school官方文档：https://www.w3school.com.cn/jsref/event_onbeforeunload.asp
兼容性不错，大家放心用吧 ^_^
