## 原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：[https://www.jianshu.com/u/4876275b5a73](https://www.jianshu.com/u/4876275b5a73)
邮箱：job_tom@foxmail.com
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的第一级组件内有效！
