谈浏览器返回时beforeRouteLeave路由守卫不使用next()方法的影响

浏览器返回时beforeRouteLeave使用与不使用next()方法的区别

 beforeRouteLeave路由守卫不使用next()方法，点击返回的时候，URL会变为上一层的URL，但页面内容不会切换到上一层，还停留在当前页面。

使用next()方法，离开页面的时候，URL会变为上一层的URL，页面内容也会切换到上一层并刷新上一层页面。

next()方法和location.reload()方法都属于异步方法

大家可以用alert()弹框做拦截测试下

1
2
3
4
5
beforeRouteLeave(to, form, next){
    //location.reload();
    next();
    alert('test')
}

浏览器返回时next()方法替代方案

可以用location.reload()方法替代，location.reload()方法实现重新加载当前URL

1
2
3
4
5
6
7
beforeRouteLeave(to, form, next){
    if(this.isNext){//isNext[true, false]
     location.reload();
    }else{
     next();
    }
  }

注意：以上结论，只适合VUE附带query传参或不附带任何传参场景使用，不适合在VUE附带params传参的场景使用，无论是next()方法刷新，还是location.reload()方法重载都会导致params传参丢失！