vue-router hooks源码实现原理_vue router beforehooks

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
1
2