vue路由检测回退与判断
使用vue项目在微信浏览器内的h5进行展示,此时的返回按钮为微信自带的返回按钮,在界面中能够使用vue钩子函数进行检测。如果需要在微信小程序内进行内嵌h5,微信小程序界面需要一些关闭界面按钮,来达到用户自身的界面关闭需求微信程序的路由回退检测://离开当前页面beforeRouteLeave(to, from, next) {...
·
-
使用vue项目在微信浏览器内的h5进行展示,此时的返回按钮为微信自带的返回按钮,在界面中能够使用vue钩子函数进行检测。如果需要在微信小程序内进行内嵌h5,微信小程序界面需要一些关闭界面按钮,来达到用户自身的界面关闭需求
-
微信程序的路由回退检测:
//离开当前页面
beforeRouteLeave(to, from, next) {
// 1 操作来自关闭按钮(按钮点击flag)
if(this.goroomFlag) {
next();
}else{
// 2 来自移动端界面回退
next(this.actualBack());
// 3 来自移动端界面回退
next(confirm("是否离开当前界面?"));
}
},
此处包含的next方法一定需要写,否则界面不会执行下去
3. 移动端端界面回退检测处理在actualBack方法内,返回值为flase即回退取消/返回值为true即回退操作
//处理界面回退问题
actualBack(){
//离开界面显示
this.closeDisplay();
return false;
},
我在界面回退时,不仅仅只是类似confirm的含义,添加了界面修饰,即此时会有离开的界面提示,在界面中点击离开后,才会离开
closeDisplay方法中包含“仍然离开“按钮逻辑
leaveRoom(){
//按钮点击flag
if(this.goroomFlag){
this.$router.go(-1);
}
},
更多推荐
已为社区贡献21条内容
所有评论(0)