解决Vue.js应用回退或刷新界面时提示用户保存修改问题
在实际应用中,运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失。可以采用以下两种手段防止运营编辑时丢失数据:
在运营人员刷新页面或回退时,自动保留数据至浏览器端本地存储,在重新进入编辑页面时再将数据从本地存储中加载到编辑界面。
第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续。
无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作。
实际上,当用户执行页面刷新时,会触发 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应用中,通常是一个页面的应用,所有的子页面享用一个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应用回退或刷新界面时提示用户保存修改问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小会及时回复大家的!
您可能感兴趣的文章:
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 解决Vue.js由于延时显示了{{message}}引用界面的问题
- jetty部署热修改js(解决jetty中热部署js修改不能保存问题)
- 在表示层禁用浏览器缓存的方法,以解决应用开发不能即时刷新体现修改结果的问题
- 如何使用 BindingSource 绑定 ListBox,同时解决绑定 List<T> 后修改数据源不能同时刷新界面显示的问题
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 标签通过href跳转后新界面引用的CSS和JS文件需要刷新界面之后才可以加载问题解决
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- JS判断用户是否有权限进入当前页面,没有直接关闭(解决IE7以上版本提示问题)
- @RequestMapping 用法详解之地址映射 解决 界面保存后 无法关闭刷新问题
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决...
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 双缓冲解决高频率刷新界面闪烁问题(C#)
- 解决Sqlserver2008(sql2008),修改数据表无法保存的问题
- 对于如何解决wicket Ajax 自动提示应用中出现的乱码问题!
- 在用户注册时提示密码过短的功能的实现(alpha版时未解决的问题)
- Web应用运行的细节问题:预编译提高网站性能、跟踪用户习惯和解决线程同步
- js修改input的type属性及浏览器兼容问题探讨与解决