解决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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP基础知识回顾
2012/08/16 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
js DOM的学习笔记
2011/12/22 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
使用Python生成url短链接的方法
2015/05/04 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python基础教程之异常详解
2019/01/10 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python之生成多层json结构的实现
2020/02/27 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
会计实习自我鉴定
2013/12/04 职场文书
出国留学担保书
2014/05/20 职场文书
农业项目建议书
2014/08/25 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
Nginx 匹配方式
2022/05/15 Servers