个人理解：
- 在进行路由切换的过程就是导航；
- 设置导航，就在切换过程中进行限制，限制执行了，就是守卫成功了；
以下结合各路大神的总结，望海涵。
1、有3种导航守卫
- 全局守卫
- 单个路由独享守卫
- 组件内的守卫
2、都有3个参数，除了 afterEach守卫（后面详解）
- to： 要进入的目标路由
- from： 离开当前的路由
- next： 控制路由执行（必须要有），一定要调用该方法来 resolve 这个钩子
3、next 4个行为：
- 挂载到 router 实例上
- 用于控制路由的每一次跳转
1.1、beforeEach：全局前置守卫
作用： 常用于登录验证
1.2、beforeResolve：全局解析守卫
你可以用 注册一个全局守卫。这和 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
1.3、afterEach：全局后置钩子守卫
这些钩子不会接受 函数也不会改变导航本身：
2.1、 beforeEnter
可以在路由配置上直接定义 守卫；只有进入到当前页面才会执行的守卫函数；
3.1、beforeRouteEnter
- 在渲染该组件的对应路由被 confirm 前调用（大概意思：进入之前调用）；
- 不能获取 this 实例。因为当守卫执行前，组件实例还没被创建；
- beforeEach 和 独享守卫 beforeEnter 之后，全局 beforeResolve 和 afterEach 之前调用；
- 守卫 不能 访问 ，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。可以通过传一个回调给 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
3.2、beforeRouteUpdate
- 在当前路由改变，但是该组件被复用时调用；
- 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用；
- 可以访问组件实例
3.3、beforeRouteLeave
- 导航离开该组件的对应路由时调用
- 可以访问组件实例
- 当组件内有定时器，需要清除时，路由切换以免导致内存占用；
- 将公用信息保存到 session 或 vuex 中；
- 当页面有未关闭的窗口，或有未保存的时候，该导航可以通过 来取消阻止页面跳转，示例如下：
- 导航被触发。
- 在失活的组件里调用 守卫。
- 调用全局的 守卫。
- 在重用的组件里调用 守卫 (2.2+)。
- 在路由配置里调用 。
- 解析异步路由组件。
- 在被激活的组件里调用 。
- 调用全局的 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 钩子。
- 触发 DOM 更新。
- 调用 守卫中传给 的回调函数，创建好的组件实例会作为回调函数的参数传入。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/10735.html