2025年vue路由守卫有几种（vue3 路由守卫）

科技前沿 • 2025-06-01 07:43 • 阅读 43

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

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

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

beforeRouteUpdate(to, from, next)

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

路由独享守卫只有一个:进入路由时触发beforeEnter

1.使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫

2.代码

以上就是vue3中7种路由守卫如何使用的详细内容，更多请关注php中文网其它相关文章！