Vue 离开页面时的校验-mixin-beforeRouteLeave
一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性
一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性
一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性
/**
* what for: check when leave
* how to use:
* step-1: import routeLeaveCheck from '@/mixins/router/leave-check'
* step-2: mixins: [routeLeaveCheck],
* step-3:
* define 【 needCheckFlag 】 in your own vue file(default value is true)
* sometime you dont' need checking when leave this page(click button, router-link etc..),
* you can change the value to be "false" before such kind operations
*/
export default {
beforeRouteLeave(to, from, next) {
if (this.needCheckFlag) {
this.$confirm('确定离开此页面?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// some logic
next()
})
.catch(() => { next(false) })
} else {
next()
}
}
}
Vue 离开页面时的校验-mixin-beforeRouteLeave的更多相关文章
- JavaScript当离开页面时可以进行的操作
当JavaScript离开页面时可以进行的操作 window.onbeforeunload = function() { var email = document.getElementById(&qu ...
- vue进入页面时不在顶部,检测滚动返回顶部按钮
这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...
- Jquery判断离开页面时,通过Ajax更新数据(兼容IE,Chrome,FF浏览器)
现在很多项目都有客户离开网页时,处理一些业务的需求.所以焦点就聚集在了如何获取页面离开事件. 以下是本人在一个项目中需要记录页面浏览时长的处理办法,测试兼容IE,Chrome,FF浏览器 代码如下: ...
- Jquery关闭离开页面时提醒
[导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- vue离开页面销毁定时器
beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭 } //利用vue的生命周期函数 vue 是单页面应用,路由切换 ...
- vue离开页面销毁滚动事件
methods:{ handleFun(){ /**销毁处理*/ } }, beforeDestroy(){ window.removeEventListener("scroll&qu ...
- 【原】js离开页面执行函数 onbeforeunload与onunload事件
在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
随机推荐
- CISSP 考试经验分享
复习资料: <Eleventh Hour CISSP> <汇哲培训讲义> <CISSP Official Security Professional>Eighth ...
- Python Ethical Hacking - Malware Analysis(1)
WRITING MALWARE Download file. Execute Code. Send Report. Download & Execute. Execute & Repo ...
- Spring Boot 2.x基础教程:使用EhCache缓存集群
上一篇我们介绍了在Spring Boot中整合EhCache的方法.既然用了ehcache,我们自然要说说它的一些高级功能,不然我们用默认的ConcurrentHashMap就好了.本篇不具体介绍Eh ...
- Selenium自动化:有代码测试与无代码测试。这些你都懂了吗?
大多数测试人员认为 Selenium是满足其测试自动化需求的自动化框架.作为全球测试人员使用的开放源框架, Selenium 无疑是测试人员适应日趋敏捷的公司的一种好方法.实际上, Selenium仍 ...
- 今天完成顺利编译d:\test\Console.java
今天完成顺利编译d:\test\Console.java import javax.swing.*;import java.awt.event.*; public class Console{ pub ...
- undefined reference to `typeinfo for xxx 报错
编译成功了,链接的时候出现了这个报错 产生”undefined reference to `typeinfo for xxx’“最常见的原因就是基类的虚函数未实现了. 由于C++类的实现可以分布在多个 ...
- Day18_下单
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...
- MacOS下JDK8的安装与配置
微信搜索"艺术行者",关注并回复关键词"jdk8"获取安装包和API文档资料! 一.安装环节 1.打开网页 https://www.oracle.com/jav ...
- 从RNN到BERT
一.文本特征编码 1. 标量编码 美国:1 中国:2 印度:3 … 朝鲜:197 标量编码问题:美国 + 中国 = 3 = 印度 2. One-hot编码 美国:[1,0,0,0,…,0]中国:[0, ...
- 《闲扯Redis九》Redis五种数据类型之Set型
一.前言 Redis 提供了5种数据类型:String(字符串).Hash(哈希).List(列表).Set(集合).Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要. ...