修改内容未保存浏览器关闭确认

最近开发遇到了检测用户修改未保存时，关闭浏览器提示保存的需求，类似下图。本文记录下用到的知识点。

window.onbeforeunload

详细描述见 onbeforeunload MDN 文档 作用是：当窗口即将被卸载（关闭）时，会触发该事件。此时页面文档依然可见，且该事件的默认动作可以被取消。另外页面刷新和切换也会触发该函数。

使用方法：

window.onbeforeunload = () => {
  if(hasChanged)
    return "放弃当前未保存内容而关闭页面？";
}
复制代码

window.onunload

onunload 方法用法与onbeforeunload 相同，功能相同

对比如下：

onbeforeunload 浏览器兼容性较好，主流浏览器均支持。onunload 兼容性较差 onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。

导航守卫

但是onbeforeunload 在Vue 单页网站中有时候不起作用，因为单页切换不会触发窗口卸载事件。因此要用到 Vue-router 导航守卫来实现，用到了组件内的守卫。用法如下：

beforeRouteLeave: function(to, from , next){
  if (hasChanged) {
    this.$confirm('放弃当前未保存内容而关闭页面？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
    }).catch(() => {
      next(false)
    });
  } else {
    next()
  }
}
复制代码

转载于:https://juejin.im/post/5ad9556a518825672205c090