VUE导航守卫beforeRouteLeave实现路由跳转拦截

## 原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：

笔名：来碗鸡蛋面

主页：[https://www.jianshu.com/u/4876275b5a73](https://www.jianshu.com/u/4876275b5a73)

邮箱：[email protected]

CSDN ID：tom_wong666

基本语法：

beforeRouteLeave (to,from, next) {

    // 必须调用next()

    // next(true)进入原计划的下个页面

    // next(false)进入from页面(即原本的页面)         

}

背景:

Vue做移动端，项目实际代码无法展示，写了一个示例demo见如下git地址：

https://github.com/tom-wong666/model.git

Demo说明：

A组件跳转到B组件，点击B组件的按钮打开其自带的C遮罩层(100%遮挡)，C遮罩层自带关闭按钮用以返回(显示)B组件；

问题：

如果点击移动端的返回按钮(效果同点击浏览器左上方的回退按钮)，页面跳回到A组件了，这和常理相悖，业务逻辑要求点击C遮罩层后应该返回B组件。

解决办法：

beforeRouteLeave (to, from, next) {

  // this.show是组件内定义的data用以判定v-if="show"是否成立

  if(this.show){

  //如果show为true是显示状态，则next(false)返回from的组件(B组件)

    this.show=false

      next(false);

  }else{

    //反之，则next(true)计入next组件(A组件)

      next(true);

  }       

}

注意：

beforeRouteLeave只在设置了router的第一级组件内有效！