解决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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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 empty函数 使用说明
2009/08/10 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python 多线程重启方法
2019/02/18 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python实现邮件自动发送
2019/08/10 Python
centos7之Python3.74安装教程
2019/08/15 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python递归函数特点及原理解析
2020/03/04 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
工程造价自荐信
2013/10/09 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
全神贯注教学反思
2014/02/03 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年求职自荐信范文
2015/03/04 职场文书