vue 离开路由事件beforerouteleave 指定路由会死循环（算踩坑吧）

最新推荐文章于 2024-10-12 13:59:49 发布

会点php的前端小渣渣

最新推荐文章于 2024-10-12 13:59:49 发布

阅读量2.7k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39523111/article/details/113939891

版权

vue 专栏收录该内容

61 篇文章 3 订阅

订阅专栏

本文详细分析了Vue路由守卫beforeRouteLeave中出现的死循环问题，解释了由于next('/in-patient-service')导致的无限循环原因，并提供了解决方案，即在进入条件时需再次判断当前to.path，以防止不必要的重定向。通过对源码的理解，博主修复了问题，确保了路由的正常切换。

摘要由CSDN通过智能技术生成

因为业务有需求吧。。。很久才用一次这个离开路由，呵呵了。（看来有空得看看这个beforeRouteLeave的源码讲解了）

先看下我以为的离开路由：

  beforeRouteLeave(to, from, next) {
     //console.log('to--->', to.path, this.isModify)
      if( storage.get('currentDj') && storage.get('currentDj')!='undefined' && storage.get('currentDj').id ){
            next('/in-patient-service'); //一开始这里，以为条件成立就直接跳转了。。结果死循环
      }else{
          if (this.isModify) {
            next()
          } else if (
            !this.isModify &&
            to.path !== '/in-patient-service/patient-detail'
          ) {
            next('/in-patient-service/patient-detail')
          } else {
            next()
          }
      } 
  }

为啥会死循环？？？？？？

当执行钩子函数时如果遇到next('/in-patient-service')等时会中断当前导航。

比如当前导航是去'/in-patient-service',那么遇到next('/in-patient-service')后就会把to.path改为/in-patient-service，然后会重新触发这个beforeRouteLeave离开的钩子。

注意：中断后就会改变to.path，此时会重新触发执行这个钩子，你当前的路由已经是/in-patient-service，所以才一直next('/in-patient-service') 才会死循环。

解决办法：进入条件的时候必须再重新判断下当前的to.path

所以正确的代码应该是：

beforeRouteLeave(to, from, next) {
     //console.log('to--->', to.path, this.isModify)
      if( storage.get('currentDj') && storage.get('currentDj')!='undefined' && storage.get('currentDj').id ){
              if(to.path=='/in-patient-service'){
                  next();  //进入条件的时候必须再重新判断下当前的to.path
               }else{
                 next('/in-patient-service');
               }
      }else{
          if (this.isModify) {
            next()
          } else if (
            !this.isModify &&
            to.path !== '/in-patient-service/patient-detail'
          ) {
            next('/in-patient-service/patient-detail')
          } else {
            next()
          }
      } 
  }