解决Vue.js应用回退或刷新界面时提示用户保存修改问题


Posted in Javascript onNovember 24, 2019

在实际应用中,运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失。可以采用以下两种手段防止运营编辑时丢失数据:

在运营人员刷新页面或回退时,自动保留数据至浏览器端本地存储,在重新进入编辑页面时再将数据从本地存储中加载到编辑界面。
第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续。

无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作。

实际上,当用户执行页面刷新时,会触发 window 对象上的 onBeforeUnload 事件。所以,我们需要在页面加载时开始监听此事件。在Vue.js应用中,我们可以在Vue.js的 mounted 生命周期事件函数中开始监听。

mounted() {
  window.onbeforeunload = e => {
    if (!this.modified) {
    return;
    }
    // 通知浏览器不要执行与事件关联的默认动作
    e.preventDefault();
    // Chrome 需要 returnValue 被设置成空字符串
    e.returnValue = '';
  };
},

有了以上的代码,只要我们在修改了数据以后,将 modified 的值改为true,则可以在刷新整个页面时弹出如下提示:

解决Vue.js应用回退或刷新界面时提示用户保存修改问题 

当用户点击上述对话框的[ 取消 ]按钮后,会取消刷新动作,当用户选择[ 重新加载 ]后,浏览器会强制进行页面的刷新。

由于在Vue.js应用中,通常是一个页面的应用,所有的子页面享用一个window对象,所以,如果在一个Vue.js页面组件中增加了对onBeforUnload事件的监听,则可能会影响其它页面组件的相关行为,而在其他页面(如,仅浏览数据的页面)是不希望进行相关的提示的,所以,我们需要在Vue.js组件卸载的时候取消对onBeforeUnload事件的监听。

destroyed() {
  // 取消对事件的监听
  window.onbeforeunload = null;
  },

用户除了通过浏览器刷新操作退出外,还有两种可能的退出途径:

  • 点击浏览器的前进或回退操作按钮
  • 点击单页面中的前端路由链接

对于以上两种退出途径,onBeforeLoad事件通常是拦截不到相应的事件的,因为这两种操作一般是前端路由的行为。

既然是前端路由的行为,我们就需要在前端路由事件上下功夫。可喜的是,前端路由vue-router为我们提供了 导航守卫 的能力。关于vue-router导航守卫的相关知识,大家可以参考: vue-router前端路由导航守卫 。

前端路由导航守卫分为全局守卫、独享守卫、组件内守卫等。这里我们使用的是组件内守卫。

组件内守卫有以下三种

  • beforeRouteEnter 组件第一次被渲染时调用
  • beforeRouteUpdate 路由改变但组件被复用时调用
  • beforeRouteLeave 导航离开组件时调用

显而易见,我们需要监听并处理 beforeRouteLeave 事件。

beforeRouteLeave(to, from, next) {
  if (!this.modified) {
    next();
    return;
  }
  this.$confirm('当前页面数据未保存,确定要离开?', '提示', { type: 'warning' })
  .then(() => {
    next();
  })
  .catch(() => {
   next(false);
  });
},

有了以上的代码,当我们在进行路由切换时(点击浏览器回退按钮或点击页面中的其它路由链接)就会提示如下的对话框:

解决Vue.js应用回退或刷新界面时提示用户保存修改问题 

当用户选择取消时,回到原界面,当用户点击确定按钮后,页面强制刷新。

总结

以上所述是小编给大家介绍的解决Vue.js应用回退或刷新界面时提示用户保存修改问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小会及时回复大家的!

Javascript 相关文章推荐
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 #Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
微信小程序实现录音功能
Nov 22 #Javascript
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php object转数组示例
2014/01/15 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS的数组迭代方法
2015/02/05 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python 查找文件名包含指定字符串的方法
2018/06/05 Python
django 控制页面跳转的例子
2019/08/06 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python中如何引入第三方模块
2020/05/27 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
详解python对象之间的交互
2020/09/29 Python
python在协程中增加任务实例操作
2021/02/28 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
护理见习报告范文
2014/11/03 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书