vue 离开路由事件beforerouteleave 指定路由会死循环(算踩坑吧)
因为业务有需求吧。。。很久才用一次这个离开路由,呵呵了。(看来有空得看看这个beforeRouteLeave的源码讲解了)先看下我以为的离开路由:beforeRouteLeave(to, from, next) {//console.log('to--->', to.path, this.isModify)if( storage.get('currentDj') && sto
·
因为业务有需求吧。。。很久才用一次这个离开路由,呵呵了。(看来有空得看看这个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()
}
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)