问题形容

对于表单填写信息的页面，有时候会呈现用户填写了一部分不小心“来到”了这个页面，那么这个时候，产品说，须要再做一个用户提醒，问问用户是不是真的要来到这个页面。针对于这个需要，咱们把具体“来到”的形式分为两种状况

状况一 来到以后路由页面去到别的路由页面

这种状况比拟好解决，就是直接判断表单填写的信息是否变动了，如果变动了，做个弹框询问一下，没变动间接放行。或者应用beforeRouteLeave钩子做管制。比方我之前的文章：https://segmentfault.com/a/11...

状况二 间接敞开浏览器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...

w3school官网文档：https://www.w3school.com.cn/j...

兼容性不错，大家释怀用吧 ^_^