vue单页面实现当前页面刷新或跳转时提示保存


Posted in Javascript onNovember 02, 2018

前言

最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失。刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和当前页面关闭的时候无法监听,最终用window.onbeforeunload成功解决,所以用这篇文章简单记录下整个解决过程。

vue-Router的钩子:

路由钩子可以分为全局的,单个路由独享的以及组件级别的,解决上述需求只用到了组件级别的路由钩子,所以本文只介绍组件级别的路由钩子,全局的和单个路由独享的路由钩子有需要的同学可以去vue-router官网查看介绍:

组件级别路由钩子分为三种:

  1. beforeRouteEnter:当成功获取并能进入路由(在渲染该组件的对应路由被 confirm 前)
  2. beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用
  3. beforeRouteLeave:导航离开该组件的对应路由时调用

具体的介绍和写法如下:

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不!能!获取组件实例 `this`
 // 因为当守卫执行前,组件实例还没被创建
 // 可以通过传一个回调给 next来访问组件实例
 next(vm => { 
   // 通过 `vm` 访问组件实例
  })
 },
 beforeRouteUpdate (to, from, next) {
 // 在当前路由改变,但是该组件被复用时调用
 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
 // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
 // 不支持传递回调(因为this实例已经创建可以获取到,所以没必要)
 next()
 },
 beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
 // 该导航可以通过 next(false) 来取消。
 const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
 if (answer) {
  next()
 } else {
 // 不支持传递回调(因为this实例已经创建可以获取到,所以没必要)
  next(false)
 }
 }
}

注意:在刷新当前页面时候,beforeRouteLeave不会触发,它只在进入到其他页面时候才会触发,但是beforeRouteEnter会在刷新的时候触发。

通过beforeRouteLeave这个路由钩子,我们就可以在用户要离开此页面时候进行提示了!

beforeRouteLeave (to, from, next) {
 const answer = window.confirm('当前页面数据未保存,确定要离开![image](http://note.youdao.com/favicon.ico)?')
 if (answer) {
  next()
 } else {
  next(false)
 }
 }

显示的提示框如下:

vue单页面实现当前页面刷新或跳转时提示保存

监听浏览器的刷新、页面关闭事件

但是,这个时候就实现了我们最终的需求了么?并没有,还有一步:用window.onbeforeunload监听浏览器的刷新事件,当然为了防止从当前单页面跳到其他页面之后,在刷新所在新的页面还会触发window上的onbeforeunload的问题,我们不仅要及时的添加onbeforeunload事件,更要及时删除此事件,下面有两种解决方法可供选择:

通过判断它的路由是否是当前需要添加禁止刷新的页面

mounted() {
 window.onbeforeunload = function (e) {
  if(_this.$route.fullPath =="/layout/add"){
   e = e || window.event;
   // 兼容IE8和Firefox 4之前的版本
   if (e) {
   e.returnValue = '关闭提示';
   }
   // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
   return '关闭提示';
  }else{
  window.onbeforeunload =null
  }
}
};

在destory或者beforeDestory的生命周期中直接将onbeforeunload事件置空

mounted() {
 window.onbeforeunload = function (e) {
  e = e || window.event;
  // 兼容IE8和Firefox 4之前的版本
  if (e) {
   e.returnValue = '关闭提示';
  }
  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
 }
};
destroyed() {
  window.onbeforeunload = null
 }

显示的提示框如下:

vue单页面实现当前页面刷新或跳转时提示保存

总结

最终,在beforeRouteLeave和onbeforeunload的共同作用下,这个刷新、跳转或者关闭等情况下需要提示保存的需求完美解决!但是,还有一点点小遗憾,就是onbeforeunload中弹框的自定义提示语设置始终无法生效,大家要是有更加合适的处理办法,欢迎多多交流指正!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
vue组件间通信解析
Mar 01 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
7个JS基础知识总结
2014/03/05 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
详解python3中zipfile模块用法
2018/06/18 Python
简单了解python的内存管理机制
2019/07/08 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
一年级班主任感言
2014/03/08 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
入党现实表现材料
2014/12/23 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Linux磁盘管理方法介绍
2022/06/01 Servers