路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）
to：要跳转到的目标路由
from：从当前哪个路由进行跳转
next：不做任何阻拦，直接通行
注意： 必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。
案例：
全局路由守卫有三个：全局前置守卫，全局后置守卫,全局解析守卫
全局前置守卫
1.使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚
2.代码:
3.例子:做登录判断
全局后置守卫
1.使用方式：main.js中配置,和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。钩子不会接受next函数也不会改变导航本身
2.代码:
全局解析守卫
1.使用方式：main.js中配置,这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
2.代码:
组件内守卫有个三个：路由进入之前beforeRouteEnter，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate
- beforeRouteEnter(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
beforeRouteUpdate(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
- beforeRouteLeave(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
路由独享守卫只有一个:进入路由时触发beforeEnter
- 路由独享守卫 beforeEnter(to, from, next)
1.使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫
2.代码
1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
解析 ： 这三个差不多就放在一起还有个对照
1.首先来说说执行时机 ： 路由独享守卫的后面 调用这三个守卫 。
2. 书写位置 ： 在单个vue文件内部 ， 与 methods , 等 api 同级
3. 只有 beforeRouteEnter 参数 有 next , 因为这个路由不能访问this ，于是就有了next 函数 ， 可以向里面传递一个回调函数 ， 回调函数的参数就是 this , 可以看代码， 其他两个组件内部守卫 都可以的访问this , 所以就没有必要在去加next ,(官网意思就是这个)
vue2和vue3的写法基本一致没有改变
到此这篇关于vue3中7种路由守卫的使用大全的文章就介绍到这了,更多相关vue3路由守卫使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
到此这篇vue路由守卫（vue路由守卫的几种方法）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/39795.html