Vue中beforeRouterEnter的应用
beforeRouteEnter
项目需要在进入某个页面前,判断从特定页面进来时,做某些处理。例如:只有从详情页回到列表页需要重新调接口。此时,用到了beforeRouteEnter方法。
注意:在在内部获取不到外部的this,方法、变量等都获取不到。但vm可以获取到method中的方法 以及变量,可以自行打印vm看一下
beforeRouteEnter (to, from, next) {
next(vm => {
  // 通过 `vm` 访问组件实例
 vm.deleteScan();
})
}
beforeRouteLeave
在页面离开时做的操作,最常见的场景:用户修改了页面某些字段,还没有保存就要离开当前页面。此时在页面离开前需要给用户提示
beforeRouteLeave(to, from, next) {
    this.alert();
    next();
  },
alert(){
   alert('当前修改还未保存!');
}
此时函数内部可以访问到this,重要:执行完要做的操作后,必须写 next();,否则页面不会走~
Vue中beforeRouterEnter的应用的更多相关文章
- vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
		
vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492 vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...
 - vue中如何不通过路由直接获取url中的参数
		
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
 - vue中的重要特性
		
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
 - Vue中comoputed中的数据绑定
		
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
 - vue中使用stompjs实现mqtt消息推送通知
		
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
 - Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
		
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
 - vue中watched属性
		
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
 - 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
		
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
 - 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
		
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
 
随机推荐
- javascript“命名空间”的费曼输出[原创]
			
Javascript由于没有命名空间的概念,所以好多的框架或库就用了某些“命名空间”的技巧.在学习作为函数的命名空间时,我翻阅了好多的书本和blog,很多的概念和说明都是要么过于烦杂或过于简单.现在由 ...
 - spring boot + druid + mybatis + atomikos 多数据源配置 并支持分布式事务
			
文章目录 一.综述 1.1 项目说明 1.2 项目结构 二.配置多数据源并支持分布式事务 2.1 导入基本依赖 2.2 在yml中配置多数据源信息 2.3 进行多数据源的配置 三.整合结果测试 3.1 ...
 - vuex中使用对象展开运算符
			
使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...
 - shell遍历文件
			
取文件每行的数据,需要按列取 可以 sed 加管道 使用 awk 取列 platform="list.txt" line=`grep -vc '^$' $platform` ; ...
 - [apue] popen/pclose 疑点解惑
			
问题请看这里: [apue] 使用 popen/pclose 的一点疑问 当时怀疑是pclose关闭了使用完成的管道,因此在pclose之前加一个足够长的sleep,再次观察进程文件列表: 哈哈,这下 ...
 - 设计模式-状态模式(State)
			
状态模式是行为模式的一种,状态模式允许改变对象内部状态来改变对象的行为. 角色和职责: 1.上下文(Context)-Order: 拥有内部的状态 2.状态接口(Status)-State: 一 ...
 - webpack4基础入门操作(一)
			
基于webpack4实践:开始:打开控制面板,制定到创建Webpack的文件夹. 并创建初始配置文件package.json 输入命令:npm init -y,在文件夹中出现一个package.jso ...
 - CentOS 6.5 下安装及使用中文输入法
			
第一次在本机环境下搭载Linux环境,但搭载后发现在CentOS 6.5只能英文输入,于是试着安装并启用中文输入法,经过一翻折腾,实现了在终端和自带火狐浏览器下支持中文输入法. CentOS下安装中文 ...
 - Kafka Eagle V1.3.4更新预览
			
1.概述 Kafka Eagle是一款开源的Kafka集群监控系统,源代码托管在Github.目前Kafka Eagle已更新到V1.3.4版本,域名已经统一更新为http://www.kafka-e ...
 - Spring Boot + Elasticsearch 实现索引的日常维护
			
全文检索的应用越来越广泛,几乎成了互联网应用的标配,商品搜索.日志分析.历史数据归档等等,各种场景都会涉及到大批量的数据,在全文检索方面,方案无外乎Lucene.Solr.Elasticsearch三 ...