個(gè)人需求闡述：

? ? ? ? 當(dāng)用戶(hù)在頁(yè)面A中，填寫(xiě)了內(nèi)容之后，沒(méi)有點(diǎn)擊“保存/確定”，直接通過(guò)點(diǎn)擊返回按鈕或者手機(jī)的物理返回鍵直接返回時(shí)，需要給出一個(gè)二次確認(rèn)的彈層，當(dāng)用戶(hù)點(diǎn)擊確定離開(kāi)之后，跳轉(zhuǎn)到頁(yè)面B，點(diǎn)擊取消，頁(yè)面不跳轉(zhuǎn)

頁(yè)面A的核心代碼如下：

<button @click="goPage">離開(kāi)此頁(yè)面，前往B頁(yè)面</button>import { onLoad, onUnload } from '@dcloudio/uni-app'onLoad(() => {console.log('頁(yè)面加載了')uni.addInterceptor('navigateTo', interceptor)
})onUnload(() => {console.log('頁(yè)面被卸載了')uni.removeInterceptor('navigateTo')
})// 攔截器
const interceptor:UniApp.InterceptorOptions= {async invoke(options: UniApp.NavigateToOptions) {const flag = await leaveBeforePage()if (flag) {return options} else {return false}}}// 離開(kāi)頁(yè)面前的判斷
const leaveBeforePage = (): Promise<boolean> => {return new Promise((resolve) => {uni.showModal({content: '有信息未被保存，確認(rèn)離開(kāi)當(dāng)前頁(yè)面？',showCancel: true,success: ({ confirm }) => {if (confirm) {resolve(true)} else {resolve(false)}}})})
}// 手動(dòng)點(diǎn)擊返回頁(yè)面B
const goPage = () => {uni.navigateTo({ url: '/pages/home/home' })
}

注意：如果是點(diǎn)擊tabBar的按鈕進(jìn)行切換時(shí)，頁(yè)面離開(kāi)時(shí)的攔截器會(huì)無(wú)效，tabBar頁(yè)面的攔截需要在onShow中處理。

本文是作者原創(chuàng)，大家在使用中有問(wèn)題，歡迎留言評(píng)論！