Vue中beforeRouterEnter和beforeRouteLeave的应用

beforeRouteEnter

项目需要在进入某个页面前,判断从特定页面进来时,做某些处理。例如:只有从详情页回到列表页需要重新调接口。此时,用到了beforeRouteEnter方法。

注意:在在内部获取不到外部的this,方法、变量等都获取不到。但vm可以获取到method中的方法 以及变量,可以自行打印vm看一下

beforeRouteEnter (to, from, next) {
next(vm => {
  // 通过 `vm` 访问组件实例
 vm.deleteScan();
})
}

beforeRouteLeave

在页面离开时做的操作,最常见的场景:用户修改了页面某些字段,还没有保存就要离开当前页面。此时在页面离开前需要给用户提示

beforeRouteLeave(to, from, next) {
    this.alert();
    next();
  },

alert(){
   alert('当前修改还未保存!');     
}

此时函数内部可以访问到this,重要:执行完要做的操作后,必须写 next();,否则页面不会走~

 
原文地址:https://www.cnblogs.com/lemoncool/p/9242691.html