Vue路由钩子在生命周期函数的体现
1.完整的路由导航解析流程(不包括其他生命周期)
触发进入其他路由
调用要离开路由的组件守卫beforeRouteleave
调用全局前置守卫:beforeEach
在重用的证件里调用beforeRouteUpdate
调用路由独享守卫beforeEnter
解析异步路由组件
在将要进入的路由组件种调用beforeRouteEnter
调用全局解析守卫beforeResolve
导航被确认
调用全局后置钩子的afterEach钩子
触发Dom更新(mounted)
执行beforeRouteEnter守卫中传给next的回调函数
2.触发钩子的完整顺序
路由导航,keep-alive,和组件生命周期钩子结合起来,触发顺序,假设是从a组件离开,第一次进入b组件;
beforeRouteLeave:路由组件的组件离开路由前的钩子,可取消路由离开
beforeEnter:路由独享守卫
beforeRouteEnter:路由组件的组件进入路由前钩子
beforeResolve:路由解析守卫
afterEach:路由全局后置钩子
beforeCreate:组件生命周期,不能访问this;
created组件生命周期,可以访问this,不能访问dom
beforeMount:生命周期
deactivated:离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子
mounted:访问/操作dom
activated:进入缓存组件,进入a的嵌套子组件唉(如果有的话)
执行beforeRouteEnter回调函数next
3.导航行为被触发到导航完成的整个过程
导航行为被触发,此时导航未被确认
在失活的组件里调用离开守卫beforeRouteLeave
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate守卫
在路由配置里调用beforeEnter
解析异步路由组件(如果有)
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve守卫,标示解析阶段完成
导航被确认
调用全局的afterEach钩子
非重用组件,开始组件实例的生命周期:beforeCreate&created,beforeMount&mounted
触发Dom更新
用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
导航完成
上一篇：扎卡不停球世界波破门，进球后诈伤庆祝队医看傻了 扎卡十大远射进球 扎卡世界波锁定胜局
下一篇：WCBA二阶段首战 厦门女篮两名主力赛季报销 主场不敌上海女篮 wcba第二轮四川女篮赛况 wcba上海女篮爆冷击败山东女篮