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的应用的更多相关文章

  1. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  2. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  3. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  5. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  6. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  7. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  8. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  9. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

随机推荐

  1. 使用Core Audio实现VoIP通用音频模块

    最近一直在做iOS音频技术相关的项目,由于单项直播SDK,互动直播SDK(iOS/Mac),短视频SDK,都会用到音频技术,因此在这里收集三个SDK的音频技术需求,开发一个通用的音频模块用于三个SDK ...

  2. 以实现MongoDB副本集状态的监控为例,看Telegraf系统中Exec输入插件如何编写部署

    既有的Telegraf 关于MongoDB的输入插件很难实现对副本集节点状态的监控,副本集节点状态有 PRIMARY.SECONDARY.RECOVERYING.ARBITER 等.现在我们尝试通过  ...

  3. Null作为参数的时候,Java编译器如何调用函数?

    public class TestNull { public void method(Object o){ System.out.println("Object Version") ...

  4. 使用docker启动mysql

    安装docker 查询mysql版本, docker search mysql 拉取指定版本的镜像 docker pull NAME 启动镜像, 第一次启动最少需要指定MYSQL_ROOT_PASSW ...

  5. 【HDU - 2612】Find a way

    -->Find a way 直接上Chinese  Descriptions: hsj和lsh最近迷上了pokemon go的游戏.在双十一大物期中考试来临之前,他们想抓一只稀有土拨鼠来攒攒人品 ...

  6. JDK源码分析系列02---ArrayList和LinkList

    ArrayList和LinkList的源码分析 概要 ArrayList和LinkList是常用的存储结构,不看源码先分析字面意思,Array意思是数组,可知其底层是用数组实现的,Link意思是链接, ...

  7. Codeforces 782B:The Meeting Place Cannot Be Changed(三分搜索)

    http://codeforces.com/contest/782/problem/B 题意:有n个人,每个人有一个位置和速度,现在要让这n个人都走到同一个位置,问最少需要的时间是多少. 思路:看上去 ...

  8. asp.net core系列 68 Filter管道过滤器

    一.概述 本篇详细了解一下asp.net core filters,filter叫"筛选器"也叫"过滤器",是请求处理管道中的特定阶段之前或之后运行代码.fil ...

  9. kuangbin专题专题四 Heavy Transportation POJ - 1797

    题目链接:https://vjudge.net/problem/POJ-1797 思路:请参考我列出的另一个题目,和这个题目要求的值相反,另一个清楚后,这个写的解释就明白了. 另一个类似题目的博客:h ...

  10. java将复数字符串虚部实部分离,并实现加减运算

    java字符串构造复数 将字符串分解为复数的实部和虚部 定义一个复数类,数据成员有实部和虚部,根据传参不同构造方法重载,并定义复数的加减方法,以及toString方法.有难度的便是用字符串构造复数了, ...