一起做网站郑州石家庄最新消息今天

个人需求阐述：

        当用户在页面A中，填写了内容之后，没有点击“保存/确定”，直接通过点击返回按钮或者手机的物理返回键直接返回时，需要给出一个二次确认的弹层，当用户点击确定离开之后，跳转到页面B，点击取消，页面不跳转

页面A的核心代码如下：

<button @click="goPage">离开此页面，前往B页面</button>import { onLoad, onUnload } from '@dcloudio/uni-app'onLoad(() => {console.log('页面加载了')uni.addInterceptor('navigateTo', interceptor)
})onUnload(() => {console.log('页面被卸载了')uni.removeInterceptor('navigateTo')
})// 拦截器
const interceptor:UniApp.InterceptorOptions= {async invoke(options: UniApp.NavigateToOptions) {const flag = await leaveBeforePage()if (flag) {return options} else {return false}}}// 离开页面前的判断
const leaveBeforePage = (): Promise<boolean> => {return new Promise((resolve) => {uni.showModal({content: '有信息未被保存，确认离开当前页面？',showCancel: true,success: ({ confirm }) => {if (confirm) {resolve(true)} else {resolve(false)}}})})
}// 手动点击返回页面B
const goPage = () => {uni.navigateTo({ url: '/pages/home/home' })
}

注意：如果是点击tabBar的按钮进行切换时，页面离开时的拦截器会无效，tabBar页面的拦截需要在onShow中处理。

本文是作者原创，大家在使用中有问题，欢迎留言评论！