vue进入页面执行的钩子函数_vue-router 钩子函数（路由拦截）

1、全局的钩子

beforeEach(to，from，next)

afterEach(to，from，next)

2、组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

methods: {},

beforeRouteLeave (to, from, next) {}

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

beforeRouteEnter获取到this实例

beforeRouteEnter (to, from, next) {

next(vm => {

// 通过 `vm` 访问组件实例

})

}

最后是完整的导航解析流程：

1、导航被触发

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

3、调用全局的 beforeEach 守卫

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

5、在路由配置里调用 beforEnter

6、解析异步路由组件

7、在被激活的组件里调用 beforeRouteEnter

8、调用全局的 beforeResolve 守卫

9、导航被确认

10、调用全局的 afterEach 钩子

11、触发 DOM 更新

12、在创建好的实例调