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的回调函数

        导航完成