vue 路由--- 导航守卫

╰+攻爆jí腚メ 2023-10-12 08:41 103阅读 0赞

个人理解：路由跳转是一个大的过程，就跟组件的创建一样，不是涉及组件的创建 -- 销毁，那么路由的跳转也同样涉及到这个过程。（对接springmvc里面的拦截器，spring的aop，也就是**代理模式**）。

路由跳转前后对这个路由进行操作之类的。

**目录**

1.全局守卫

2.单个路由守卫

--------------------

## 1.全局守卫 ##

3个大钩子，**beforeEach、beforeResolve（2.5+）、afterEach**,这个中间效果湖绿不计，其实看名字就知道就是在路由跳转跳转前后分别触发的**钩子函数（就是伴随某个阶段执行的函数）**

router.beforeEach((to, from, next) => {
      //to 将要访问的路径
      //from 代表从哪个路径跳转而来
      //next 是一个函数，表示放行
      // next() 放行  next('/login') 强制跳转
    })

看上述，看的出来，可以利用如果不满足全局设置条件，然后就重定向（强制跳转）。

卧槽，这个tm的就很简单了，我们之前不是给路由起了别名吗？name ,path属性，我们都能拿到。

**案例：看下这个大致了解**

//挂载路由导航守卫,控制页面访问权限
    
    router.beforeEach((to, from, next) => {
      if (to.path === '/login') return next();
      //获取token
      const tokenStr = window.sessionStorage.getItem('token')
      if (!tokenStr) return next('/login')
      next()
    })

## 2.单个路由守卫 ##

1.这接绑定在路由index.js文件内。

![ae807e1aafde470f9d7ec0d53ae714c7.png][]

2.绑定在路由的.vue文件中。

//通过路由规则，进入该组件时被调用
    1. beforeRouteEnter(to,from,next) {
      if(toString.meta.isAuth){
        if(localStorage.getTime('school')==='qinghuadaxue'){
          next()
        }else{
          alert('学校名不对，无权限查看！')
        }
      } else{
        next()
      }
    },
     
    //通过路由规则，离开该组件时被调用 
    2. beforeRouteLeave(to,from,next) {
     next()
    }

[ae807e1aafde470f9d7ec0d53ae714c7.png]: https://img-blog.csdnimg.cn/ae807e1aafde470f9d7ec0d53ae714c7.png