组件钩子函数:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed

还有两个特殊的(使用keep-alive):activated、deactivated(不详述)

v2.5.0+新增: errorCaptured (暂时还不知道咋用)

路由守卫:

全局&路由独享:

beforeEach、beforeResolve(v2.5.0+新增)、afterEach ;beforeEnter(路由独享,类似beforeEach)

组件内:

beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

代码示例:

//Router定义

Vue.use(Router)

const router = new Router({
...
}) //导航守卫 router.beforeEach((to, from, next) => {
console.log("导航前置守卫: beforeEach,");
next();
})
router.afterEach((to, from) => {
console.log("导航后置守卫: afterEach,");
})
router.beforeResolve ((to, from, next) => {
console.log("导航解析守卫: beforeResolve,");
next();
})

组件钩子:

export default {
//钩子
beforeCreate(){
console.log("组件钩子: beforeCreate");
},
created(){
console.log("组件钩子: created");
},
beforeMount(){
console.log("组件钩子: beforeMount");
},
mounted(){
console.log("组件钩子: mounted");
},
beforeUpdate(){
console.log("组件钩子: beforeUpdate");
},
updated(){
console.log("组件钩子: updated");
},
beforeDestroy(){
console.log("组件钩子: beforeDestroy");
},
destoryed(){
console.log("组件钩子: destoryed");
},
beforeRouteEnter (to, from, next) {
console.log("组件内部守卫: beforeRouteEnter,");
next()
},
beforeRouteUpdate (to, from, next) {
console.log("组件内部守卫: beforeRouteUpdate,");
next()
},
beforeRouteLeave (to, from, next) {
console.log("组件内部守卫: beforeRouteLeave,");
next()
}
}

执行输出顺序:

    导航前置守卫: beforeEach
组件内部守卫: beforeRouteEnter
导航解析守卫: beforeResolve
导航后置守卫: afterEach
组件钩子: beforeCreate
组件钩子: created
组件钩子: beforeMount
组件钩子: mounted
//执行跳转
组件内部守卫: beforeRouteLeave
导航前置守卫: beforeEach
导航解析守卫: beforeResolve
导航后置守卫: afterEach
组件钩子: beforeDestroy

vue之生命周期与导航守卫的更多相关文章

  1. vue的生命周期和路由守卫

    组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed   还有 ...

  2. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  3. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

  4. 3_1 wp8应用生命周期与导航事件[wp8特色开发与编程技巧]

    3_1生命周期 大家好,我是徐文康,今天我们来讨论一下应用程序的生命周期,首先打开app.xaml.cs文件我们可以看到这里有几个已经为我们写好的事件.   Launching 应用程序启动 Acti ...

  5. 与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏

    原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...

  6. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  7. 如何解释vue的生命周期才能令面试官满意?

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  8. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  9. vue的生命周期的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

随机推荐

  1. 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本

    继续对上一版本进行改版,变成SpringMVC框架 简易的CRM系统案例之易的CRM系统案例之JSP+MySQL+SSH框架版本 src/spring.xml <?xml version=&qu ...

  2. 优雅编写Python3 的62个小贴士

    iterable技巧 ▍1.创建一个数字序列(从0到10,间隔为2)   >>> range(0,10,2)[0, 2, 4, 6, 8] ▍2.对一串数字求和(从0到10,间隔为2 ...

  3. ps 快捷键大全

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)矩形.椭圆选框工具 [M]移动工具 [V]套索.多边形套索.磁性套索 [L]魔棒工具 [W]裁剪工具 [C]切片工具.切片选择 ...

  4. 初始化jsp页面下拉选备选项【我】

    将下列 script标签放到页面的最下端 <!-- 初始化的全局变量,供js中使用,主要拼接下拉选的初始化值 --> <script type="text/javascri ...

  5. 算法习题---3.01猜数字游戏提示(UVa340)

    一.题目 实现一个经典“猜数字”游戏.给定答案序列和用户猜的序列,统计有多少数字位置正确(A),有多少数字在两个序列都出现过但位置不对(B). 输入包含多组数据.每组输入第一行为序列长度n,第二行是答 ...

  6. Qt编写自定义控件51-可输入仪表盘

    一.前言 这个控件是近期定制的控件,还是比较实用的控件之一,用户主要是提了三点需求,一点是切换焦点的时候控件放大突出显示,一点是可直接输入或者编辑值,还有一点是支持上下键及翻页键和鼠标滚轮来动态修改值 ...

  7. mysql 对应数据库服务器配置 所能承受的tps和qps

    总结: 吞吐量实际涵盖了TPS 和 QPS TPS 是指产生事物的请求,比如对数据库 增.删.改 QTP 是对数据库查询动作,无逻辑非事物,比如 查询 假如脚本里面都是get请求,那么出来的吞吐量就是 ...

  8. LODOP获取打印状态码和时间列表

    之前有博文介绍获取打印状态码和打印状态码的含义,相关博文:LODOP获取打印机状态码和状态码含义测试.此外 ,也有获取状态码及其变化的方法,可以获取打印状态码的列表,列表包含每个状态和每个状态的时间. ...

  9. 第一次linux下安装nginx记录

    CentOS 7 安装Nginx 并配置自动启动 1.下载Nginx安装包---->地址:http://nginx.org/en/download.html 2.上传安装包到服务期 : rz 命 ...

  10. 斑马打印机ZT610有线IP地址设置

    设定完毕IP地址后,将协议改为永久,并复位网络!设置完毕,复位网络!设置完毕,复位网络!设置完毕,复位网络!  不复位网络,设置无效!