vue3的七种路由守卫

目录

vue3的七种路由守卫:

一、全局路由守卫

1.全局前置守卫（beforeEach）

2.全局后置守卫（afterEach）

3.全局解析守卫（beforeResolve）

二、组件内守卫

路由进入之前（beforeRouteEnter）

页面更新时（beforeRouteUpdate）

路由离开时（beforeRouteLeave）

三、路由独享守卫

进入路由时触发（beforeEnter）

---

vue3的七种路由守卫:

路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）

一、全局路由守卫

1.全局前置守卫（beforeEach）

使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚

 router.beforeEach((to,from,next)=>{})

 router.beforeEach((to,from,next)=>{
   if(to.path == '/login' || to.path == '/register'){
     next();
   }else{
     alert('您还没有登录，请先登录');
     next('/login');
   }
 })

除了以上判断to的页面是不是login或者register，还需要判断是不是有token：

在路由守卫这里，判断token是否存在，只有token存在的时候，才能跳转到内容页。

 //导航守卫、路由守卫、路由拦截
 router.beforeEach((to,from,next) =>{
   //验证token,只有存在token的时候，才能跳转到内容页
   console.log(to);
   console.log(from);
   let token = localStorage.getItem("token");
   //console.log(token);
   if(token || to.path === '/login'){
     next();
     console.log(token);
   }else{
     next("/login");
   }
 })

2.全局后置守卫（afterEach）

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

 router.afterEach((to,from)=>{})

3.全局解析守卫（beforeResolve）

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

 router.beforeResolve((to,from,next)=>{})

二、组件内守卫

路由进入之前（beforeRouteEnter）

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

 beforeRouteEnter(to, from, next) {
     // 在组件生命周期beforeCreate阶段触发
     console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
     next((vm) => {
       console.log('组件内路由前置守卫 vm', vm) // vm 就是this
     })
   }

页面更新时（beforeRouteUpdate）

 beforeRouteUpdate (to, from, next) {
     // 同一页面，刷新不同数据时调用，
     // 可以访问组件实例 
 }

路由离开时（beforeRouteLeave）

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

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

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

三、路由独享守卫

进入路由时触发（beforeEnter）

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})