页面关闭之前 or 路由跳转 or 刷新页面时提示用户当前页面数据是否需要保存

最新推荐文章于 2024-07-03 11:23:32 发布

Della乐多

最新推荐文章于 2024-07-03 11:23:32 发布

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏：分享踩坑集文章标签：前端

本文链接：https://blog.youkuaiyun.com/Della0930/article/details/89709351

分享踩坑集专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Vue.js中使用beforeRouteLeave守卫防止用户未保存修改即离开页面的方法，以及如何利用window.onbeforeunload在页面重载时显示警告信息。通过结合两种技术，确保了用户数据的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：首先，因为在这个页面用户修改了数据，跳转页面或者重新刷新时要提示下用户是否需要保存

beforeRouteLeave() 路由组件Vue Router提供了一个叫路由组件守卫的东东

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave(to, from, next) {
  this.$confirm('返回将丢失此页面数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      next()
    })
    .catch(() => {
      next(false)
    })
}

但是，这个只能在跳转路由的时候生效???，所以重载页面的时候是不OK滴

window.onbeforeunload() 重载页面我们可以用到浏览器自带的API来做

当窗口即将被卸载（关闭）时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消.

mounted() {
  console.log(this.mywindow)
  this.mywindow.onbeforeunload = function (e) {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
      e.preventDefault();
      e.returnValue = '关闭提示'
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示'
  }
},
destroyed() {
  this.mywindow.onbeforeunload = null
},

到这里我们的需求就完成了???