路由中的钩子函数有哪些

345 阅读2分钟

1. 全局前置导航守卫

创建方式:调用router对象的beforeEach( )钩子函数,并传入一个有三个参数的回调

触发条件:跳转之前( 即路由值变化时 )执行

作用:路由切换之前进行登录拦截,一般用来防止未登录的用户强制访问主页

原理:当路由值变化时,全局前置守卫按照创建顺序自动调用(beforeEach( )钩子函数是同步的,但里面的回调是异步的)。守卫的解析执行是异步的,此时导航在所有守卫 resolve 完之前,一直处于 pedding状态(等待中)

njeSClA9eKys30lPjo55WA.png 参数1-- to: 即将要进入的目标,是一个路由信息对象(即 $route),所以“ to ”有path、name(映射关系的名字)、params、query、fullpath等路由对象的属性

参数2-- from: 当前导航正要离开的路由,也是一个路由对象,少用

参数3-- next: 函数,必须调用next( )函数来resolve这个beforeEach( )钩子函数。

next( )表示放行;

next(false)表示中断当前的导航;

next( 路径 或 含有path属性的对象),表示强制跳转到指定路径

2. 全局后置钩子

创建方式:调用router对象的afterEach( )钩子函数,并传入一个有2个参数的回调(参数可)

触发条件:跳转之后执行

作用:路由切换之后,做一些事情,例如关闭登录时显示的进度条

特点:这个钩子函数不能传入next()函数,也不能改变路由

3. 全局解析守卫

调用beforeResolve ( )钩子函数创建,用法与全局前置导航守卫几乎一样,区别是两者的被调用的条件不同 全局解析守卫被调用的条件:

  1. 跳转之前

  2. 在所有组件内,守卫和异步路由组件被解析之后

4. 路由独享的守卫

在配置路由规则数组时,使用beforeEnter( )直接定义该路由独享的守卫,它的参数与全局前置导航守卫相同

5. 组件内的守卫

在路由组件内直接定义这三个路由导航守卫

beforeRouteEnter

beforeRouteUpdate 

beforeRouteLeave