vue 离开路由事件beforerouteleave 指定路由会死循环

474 阅读1分钟

我以为的

     beforeRouteLeave (to, from, next) {
        if(this.$route.query.from){
            next('/myTask/center')
        }else{
            next();
        } 
    },

为啥死循环

当执行钩子函数时如果遇到next('/myTask/center')等时会中断当前导航。
 
比如当前导航是去'/myTask/center',那么遇到next('/myTask/center')后就会把to.path改为/myTask/center,然后会重新触发这个beforeRouteLeave离开的钩子。
 
注意:中断后就会改变to.path,此时会重新触发执行这个钩子,你当前的路由已经是/myTask/center,所以才一直next('/myTask/center') 才会死循环。

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

beforeRouteLeave (to, from, next) {
        if(this.$route.query.from){
            if(to.path==='/myTask/center'){
                next();
            }else{
                next('/myTask/center')
            }
        }else{
            next();
        } 
    },