解决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学习笔记9 prototype封装继承
Jan 11 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
Js的Array数组对象详解
Feb 22 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
webpack入门必知必会
Jan 16 Javascript
vue组件与复用详解
Apr 08 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue打包npm run build时候界面报错的解决
Aug 13 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
sae使用smarty模板的方法
2013/12/17 PHP
给ECShop添加最新评论
2015/01/07 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
师说教学反思
2014/02/07 职场文书
读书小明星事迹材料
2014/05/03 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python