vue导航守卫（vue导航守卫有哪些）

一 全局的导航守卫

定义在全局的，也就是我们 index.js 中的 router 对象

1. 全局前置钩子函数beforeEach

全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发

参数:

to: 即将要进入的目标路由对象,to.name去匹配进入路由名称

from: 当前导航正要离开的路由对象,from.name去匹配离开的路由名称

next: 一定要调用该方法不然会阻塞路由。

全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。

2. 全局前置钩子函数beforeResolve

全局解析守卫，在路由跳转前，所有 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导航 时都会触发。

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置

3. 全局后置钩子函数afterEach

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在每次导航时都会触发。这个钩子的两个参数和beforeEach 中的to和from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next函数，也不会改变导航本身。

它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用

二 路由独享守卫

就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter

需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

三 组件守卫

定义在路由组件内部的守卫。

钩子函数和data、methods等是平级的

1. beforeRouteEnter

路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。

参数包括 to，from，next。

该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。

2. beforeRouteUpdate

对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

3. beforeRouteLeave

对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

四 导航全过程

.导航被触发。

.判断是不是离开上一个路由进来的这个路由，如果是在失活的组件里调用 beforeRouteLeave 守卫，然后调用全局的 beforeEach 守卫。否则就直接全局的 beforeEach 守卫。

.判断组件是不是被渲染过：

. 如果没有被渲染过，先调用路由独享守卫beforeEnter，解析异步路由组件后调用组件守卫beforeRouteEnter，然后调用全局的beforeResolve 。

.如果被渲染过，直接调用组件守卫beforeRouteUpdate ，然后调用全局的beforeResolve 。

.导航被确认，调用全局守卫afterEach ，触发dom更新。

.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。