vue路由守卫（vue路由守卫的几种方法）

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

讯享网

路由守卫(导航守卫)分为三种：全局守卫（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路由守卫的几种方法）

相关推荐