因为业务有需求吧。。。很久才用一次这个离开路由,呵呵了。(看来有空得看看这个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()
          }
      } 
  }

 

Logo

前往低代码交流专区

更多推荐