vue-router hooks实现原理
首先分析一下hook实际就是回调函数,然后在特定的时机,按照顺序依次执行,并且可以中断路由的跳转
hooks种类
- 路由实例上的hooks包括beforeEach、beforeResolve
- 路由配置文件也就是routes包括beforeEnter
- 销毁vue实例里的beforeRouteLeave
- 更新状态的vue的beforeRouteUpdate
- 新实例化的vue的beforeRouteEnter
hooks执行顺序
- beforeRouteLeave(当有嵌套时,子组件的hook优先于父组件执行)
- beforeEach(有多个时,按照注册顺序先后执行,注册完后会返回取消注册的函数)
- beforeRouteUpdate(当有嵌套时,父组件的hook优先于子组件执行)
- beforeEnter
- 异步组件的解析
- beforeRouteEnter
- beforeResolve
hooks原理
采用高阶函数加队列的方式,按照顺序依次执行。具体的实现如下:
hool1、hook2、hook3依次调用,并且要往下执行必须要调用next
let list = []
const hook1 = (to,from,next) => {
console.log('我是h