路由导航守卫（导航钩子）

路由导航守卫，也叫导航钩子，可以进行数据的校验

1.守卫注册，每次路由跳转的时候会触发钩子

image.png

每次路由跳转时执行，顺序如下：

image.png

数据校验

image.png

不成立时路由不会跳转
验证一些页面需要用户登录才去显示的，这些验证就可以放在beforeEach里面去做的

image.png

可以通过next传路径
还可以这样写：

image.png

2.在路由配置里面也可以增加钩子，beforeEnter是进入路由前被调用

image.png

调用顺序如下：

image.png

3.从组件内部去增加钩子，直接在对象上面去声明就可以了

image.png

4.before的触发顺序

全局--->路由配置的地方--->组件内部的地方
resolve是全部before触发后触发
after是最后被触发

image.png

beforeRouteUpdate是同一个组件在不同的路由下面，都是用这个组件去显示的时候触发

image.png

image.png

image.png

next()之前是拿不到this的，可以通过next回调取到，这里vm等于this

image.png

beforRouteEnter：做数据的获取，再把数据放到对象当中，这样在页面进入的时候数据已经获取好了。

beforRouteLeave：可以做提醒，比如页面有很多表单填写，当用户不小心点了别的链接，这里可以弹一个弹框，是否离开，如果离开再next()，不离开就不跳转，就可以把数据保存下来。

image.png

当同一个组件，跳转参数不一样时，生命周期是否会触发? mounted作为数据的获取不会被触发。

image.png

需要使用watch或者beforeRouteUpdate

image.png

5.异步路由配置，在首屏加载的时候速度会更快。

image.png