onBeforeLeave(res) { let that = this; this.isShow = false; //---------------不弹框只阻止页面返回代码,需要弹框这块不加---------------------- //间隔10ms否则太快会有问题 setTimeout(() => { this.isShow = true }, 10) //---------------不弹框只阻止页面返回代码---------------------- //弹框的话用下面的代码,也可以使用uni.showModal 或者其他弹框组件都行 wx.enableAlertBeforeUnload({ message:"您确定要返回上一页吗?", success: function(res) { console.log("成功", res); }, fail:function(errMsg) { console.log("失败", errMsg); }},
时间: 2025-04-29 17:51:42 浏览: 26
### 实现页面返回时的确认对话框
为了实现在Vue应用或小程序中当用户尝试离开页面时显示确认对话框的功能,可以采用不同的策略。
#### Vue 应用中的解决方案
在Vue项目里,利用`beforeRouteLeave`导航守卫能够拦截即将发生的路由变化,在这个过程中弹出确认对话框给用户提供选择的机会[^1]。下面是一个具体的例子:
```javascript
export default {
beforeRouteLeave(to, from, next) {
const answer = window.confirm('Do you really want to leave? You have unsaved changes!');
if (answer) {
next();
} else {
next(false);
}
},
};
```
这段代码会在试图离开当前组件对应的视图之前触发,并询问用户是否真的要离开。只有当用户点击“确定”按钮时才会继续执行跳转操作;反之,则取消此次导航行为。
#### 小程序环境下的处理方案
对于微信小程序而言,可以在页面生命周期函数`onUnload()`或者`onBackPress()`中加入相应的逻辑来阻止默认的行为并展示自定义的消息提示框[^4]。具体来说就是在页面配置文件(`page.json`)设置`enablePullDownRefresh:false`防止下拉刷新干扰的同时监听物理按键事件:
```json
{
"usingComponents": {},
"disableScroll": true,
"enablePullDownRefresh": false
}
```
接着是在`.js`文件里面添加如下代码片段:
```javascript
Page({
onUnload() {
wx.showModal({
title: '提示',
content: '您正在退出该页面,未保存的数据将会丢失。',
success(res) {
if (!res.confirm) {
// 用户点击了取消按钮,停留在本页
return;
}
// 用户点击了确定按钮,允许关闭页面
}
});
},
onBackPress(options){
wx.showModal({
title: '提示',
content: '您正在退出该页面,未保存的数据将会丢失。',
showCancel:true,
cancelText:'再看看',
confirmText:'确定',
success:function(res){
if(res.cancel){
return true;// 阻止本次返回操作
}else{
return false; // 继续之前的返回动作
}
}
})
}
})
```
需要注意的是,由于微信官方API的设计原因,即使在这里实现了模态框提醒机制,也无法百分之百地控制住所有的场景,比如快速连按两次返回键可能会绕过此验证过程直接退回到上一层级界面。
阅读全文
相关推荐



















