vue-router的钩子函数

模块一 :全局钩子  - - -   一般用来判断权限,以及页面丢失时需要执行的操作

(1)router.beforeEach(全局前置守卫)

                           (before each)意思是在 每次每一个路由改变的时候都得执行一遍

        它的参数:

                            to:Router:即将进入的目标  路由对象

                            from:Router:当前导航正要离开的路由

                            next:Function:一定要调用该方法来resolve这个钩子 进行管道中的下一个钩子

(2)router.afterEach(全局后置守卫)

         router.beforeEach 是页面加载之前,相反router.afterEach是页面加载之后

(3)router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

使用方法:

模块二:单个路由独享的--某个指定路由跳转时需执行的逻辑(路由实例):

        beforeEnter()     

某些路由单独配置守卫

模块三:组件级(局部):

beforeRouteEnter 进入路由前

beforeRouteUpdate (2.2) 路由复用同一个组件时

beforeRouteLeave 离开当前路由时

文档中的介绍


完整的导航解析流程:

导航被触发

在失活的组件里调用离开守卫

调用全局的 beforeEach 守卫

在重用的组件里调用 beforeRouteUpdate 守卫

在路由配置里调用 beforEnter

解析异步路由组件

在被激活的组件里调用 beforeRouteEnter

调用全局的 beforeResolve 守卫

导航被确认

调用全局的 afterEach 钩子

触发 DOM 更新

在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

你可能感兴趣的:(vue-router的钩子函数)