vue3路由守卫

提示：以下是本篇文章正文内容，下面案例可供参考

路由守卫

全局守卫（3个） 路由独享守卫（1个） 组件的守卫（3个）
路由守卫的三个参数
to: 要跳到的目标路由
from: 从当前那个路由进行跳转
next: 不做任何阻拦 直接通行

1.全局路由守卫

全局前置守卫 全局后置守卫 全局解析守卫
1.全局前置守卫
在main.js中配置 在路由触发跳转时触发 主要用于登录验证 也就是路由还没跳转前提前告知

2.全局后置守卫
使用方式：main.js中配置,和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。钩子不会接受next函数也不会改变导航本身

3.全局解析守卫
使用方式：main.js中配置,这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。

2.组件内守卫

组件内守卫有个三个：路由进入之前beforeRouteEnter，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate
1.beforeRouteEnter(to, from, next)
使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

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

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

3.路由独享守卫

路由独享守卫 beforeEnter(to, from, next)
使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫