1、全局导航钩子
- router.beforeEach(to, from, next): 路由改变前的钩子
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
//
})
to: 即将要进入的目标路由对象
from: 当前正要离开的路由，也是一个路由对象
next: 一定要调用该方法来resolve这个钩子
next 方法必须要调用，否则钩子函数无法 resolved
router.beforeResolve : 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，该钩子函数就被调用
router.afterEach : 路由改变后的钩子
2、路由独享钩子
可以在路由配置上直接定义 beforeEnter
cont router = new Router({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
3、组件内的导航钩子
有三种：
- beforeRouteEnter 在进入当前组件对应的路由前调用
- beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
- beforeRouteLeave 在离开当前组件对应的路由前调用
export default {
data() { ... },
beforeRouteEnter(to, from, next) {
... ...
}
}
注意：
beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this
完整的导航解析流程
导航被触发；
在失活的组件里调用 beforeRouteLeave 守卫；
调用全局的 beforeEach 守卫；
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)；
在路由配置里调用 beforeEnter；
解析异步路由组件；
在被激活的组件里调用 beforeRouteEnter；
调用全局的 beforeResolve 守卫 (2.5+)；
导航被确认；
调用全局的 afterEach 钩子；
触发 DOM 更新；
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
