beforeRouteLeave (to, from, next) {
// 必须调用next(),next(true)进入原计划的下个页面
// next(false)进入from页面(即原本的页面)
}
代码说明如上,背景是移动端+Vue,此问题的实例demo见git地址:
https://github.com/tom-wong666/model.git
问题是:A组件跳转到B组件,点击B组件的按钮打开其自带的C遮罩层(100%遮挡),C遮罩层自带关闭按钮用以返回(显示)B组件;但是,如果点击移动端的返回按钮(效果同点击浏览器左上方的回退按钮),页面跳回到A组件了,这和常理相悖,正常应该是点击返回后返回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的第一级组件内有效!
Tom哥的博客博文分类和索引页面地址:https://blog.csdn.net/tom_wong666/article/details/84137820