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}; 弹框的 ...
随机推荐
- HashMap源码实现分析
HashMap源码实现分析 一.前言 HashMap 顾名思义,就是用hash表的原理实现的Map接口容器对象,那什么又是hash表呢. 我们对数组都很熟悉,数组是一个占用连续内存的数据结构,学过C的 ...
- Django安装与简单配置(1)
目录 1. 环境准备 2. 开始安装 2.1 安装Django 2.2 安装 Mysql数据库 3. 开始配置 3.1 Django简单配置 3.1.1 创建一个工程(project)为devops: ...
- Flask前后端分离项目案例
简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用postman调试. git 重构部分: token校验模块 auths认 ...
- 好用到飞起的12个jupyter lab插件
1 简介 jupyter lab作为jupyter notebook的升级改造版,除了更加人性化的交互界面以及更多的用户自主定制功能之外,最吸引人的就是其丰富多样的拓展插件,使得每个使用jupyter ...
- 16 . Go之网络编程
互联网的本质 两台计算机之间的通信与两个人打电话原理是一样的. # 1. 首先要通过各种物理连接介质连接 # 2. 找准确对方计算机(准确到软件)的位置 # 3. 通过统一的标准(一般子协议)进行数据 ...
- Java的常用类——Object类、String类
Java的JDK中提供给我们很多封装好的类就是Java API,可以直接调用. Java 的API(API: Application(应用) Programming(程序) Interface(接口) ...
- 做完这套面试题,你才敢说懂Excel
下面的题目来自一份商品专员的面试题,其中有涉及到条件格式.自定义排序.数据验证制作下拉菜单.查找引用类函数.文本提取函数等等技能. 满满的干货技能可不是商品专员“专属”,如果你能熟练掌握,在平日工作中 ...
- string类型 C++
(C++递归预习到了string类型,这个是处理字符串的一个非常好用的东西,在C里面没有.今天来学习一下) 顺便推荐一个很不错的网站:http://c.biancheng.net/view/400.h ...
- Python2.7 PicklingError: Can't pickle <type 'instancemethod'>: attribute lookup __builtin__.instancemethod failed 问题解决
# 报错信息 PicklingError: Can't pickle <type 'instancemethod'>: attribute lookup __builtin__.insta ...
- 第六章 文件&IO流
6.1.File类 描述:该类是文件和目录路径名的抽象表示 构造方法: 方法 描述 public File(String pathname) 通过将给定的路径名字符串转换为抽象路径名来创建新的File ...