uni-app中,页面跳转前,进行拦截处理的方法

个人需求阐述:

        当用户在页面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中处理。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024第十五届蓝桥杯 C/C++ B组 参赛经历分享(以及部分题解)

前言 emmmmmm&#xff0c;dp杯居然不考dp了&#xff0c;蓝桥一直没怎么出过的高精度居然也考了&#xff08;当时居然因为没太复习那块知识直接模拟混分了&#xff09;&#xff0c;题量也改了&#xff0c;总的来说反而简单了&#xff1f;。。。还好天津竞赛弱省&#xff0c;但愿…

python实现简单的车道线检测

描述 python实现简单的车道线检测&#xff0c;本文章将介绍两种简单的方法 颜色阈值区域掩模canny边缘检测霍夫变换 这两种方法都能实现简单的车道线检测demo&#xff0c;注意仅仅是demo 下面的图片是用到的测试图片 方法1&#xff1a;颜色阈值&#xff08;Color Selection…

资深亚马逊运营实战技巧:跨境电商6大选品法

1、工具选品法 比如店雷达&#xff0c; 通过大数据分析工具选出来利基产品或者通过工具选出来利基的市场&#xff0c;然后再通过分析市场来得到产品。 以女装为例&#xff0c;通过大数据分析&#xff0c;全方位对市场需求、款式、质量等进行多维度判断&#xff0c;其中SKU销量…

Unity Android 2021 Release-Notes

&#x1f308;Unity Android 2021 Release-Notes 版本更新内容2021.3.34Android: Google play.core package is replaced with separate plugins including play.asset-delivery 2.1.0 to solve PAD related compatibility problem with Android 14.(UUM-54157)2021.3.34Androi…

改进 Elastic Agent 和 Beats 中的事件队列

作者&#xff1a;Fae Charlton, Alexandros Sapranidis 内部改进如何降低 Elastic 8.13 中的内存使用。 在 8.12 版本中&#xff0c;我们引入了性能预设 —— 一种更简单的方法&#xff0c;用于调整 Elastic Agent 和 Beats 以适应各种场景。这提高了常见环境的性能&#xff0…

K8S节点kubectl命令报错x509: certificate signed by unknown authority

K8S节点上执行kubectl get node命令报错证书问题&#xff0c;查看kubelet日志如下 [localhost10 ~]$ journalctl -xeu kubelet --since "2024-04-09" --no-pager 4月 09 00:06:22 10.10.44.23-v7-prod-cams-08 kubelet[2142]: I0409 00:06:22.150535 2142 csi_pl…

Gson

1.简介 Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个 JSON 字符串转成一个 Java 对象&#xff08;反序列化&#xff09;&#xff0c;或者反过来&#xff08;序列化&#xff09;。 在bulid.gradle中添加依赖 implementation com.goo…

LinkedList用法详解(Java)

LinkedList LinkedList 是 Java 中的一个常用类&#xff0c;它实现了 List 接口&#xff0c;采用双向链表数据结构。 1. 创建 LinkedList 对象 import java.util.LinkedList;LinkedList<String> linkedList new LinkedList<>();2. 添加元素 linkedList.add(&q…

单调栈和单调队列所学的一些问题

单调栈和单调队列所学的一些问题 单调栈 单调栈中的元素要求从栈底到栈顶单调递增 遍历数组&#xff0c;如果元素入栈后符合单调要求则顺利入栈不符合要求则弹出栈顶元素&#xff0c;元素出栈时得出结果 右侧结果:待入栈元素 左侧结果:出栈后的栈顶元素 单调栈主要用来求每一…

OpenHarmony实战开发-如何使用Web预渲染实现功能介绍。

介绍 为了便于大家在使用本案例集时能够更详细的了解各个案例&#xff0c;本案例基于Web预渲染实现了案例介绍功能&#xff0c;即应用右下角的问号icon。 效果图预览 使用说明 因为直接加载的线上README&#xff0c;因此本功能需联网使用点击icon&#xff0c;即会弹出对应案…

爬虫的目的是做什么

通过网站域名获取HTML数据解析数据&#xff0c;获取想要的信息存储爬取的信息如果有必要&#xff0c;移动到另一个网页重复过程 这本书上的代码的网址是 &#xff1a; GitHub - REMitchell/python-scraping: Code samples from the book Web Scraping with Python http://shop.…

.NET使用Refit

学习笔记&#xff1a; Refit 是一个 .NET Standard 库,它可以自动生成用于调用 REST API 的强类型客户端。根据 REST API 的定义,自动生成用于调用 API 的客户端类和方法&#xff0c;支持 GET、POST、PUT、DELETE 等常见的 HTTP 方法&#xff0c;且自动处理 HTTP 请求和响应,包…

风力发电场集中监控系统解决方案

风力发电场集中监控系统解决方案 作为清洁能源之一&#xff0c;风力发电场近几年装机容量快速增长。8月17日&#xff0c;国家能源局发布1-7月份全国电力工业统计数据。截至7月底&#xff0c;全国累计发电装机容量约27.4亿千瓦&#xff0c;同比增长11.5%。其中&#xff0c;太阳能…

火绒安全的用法

火绒安全软件是一款综合性的电脑安全防护工具&#xff0c;提供了病毒查杀、系统防护、网络安全等多种功能&#xff0c;以帮助用户保护电脑免受恶意软件和网络威胁的侵害。以下是火绒安全软件的一些主要用法&#xff1a; 病毒查杀&#xff1a;火绒安全软件提供全盘查杀、快速查杀…

[STM32+HAL]DengFOC移植之闭环位置控制

一、源码来源 DengFOC官方文档 二、HAL库配置 1、开启硬件IIC低速模式 低速更稳定 2、PWM波开启 三、keil填写代码 1、AS5600读取编码器数值 #include "AS5600.h" #include "math.h"float angle_prev0; int full_rotations0; // full rotation trac…

hive窗口函数数据范围

window的内包括&#xff1a; (ROWS | RANGE) BETWEEN (UNBOUNDED | [num]) PRECEDING AND ([num] PRECEDING | CURRENT ROW | (UNBOUNDED | [num]) FOLLOWING) (ROWS | RANGE) BETWEEN CURRENT ROW AND (CURRENT ROW | (UNBOUNDED | [num]) FOLLOWING) (ROWS | RANGE) BETWEEN…

前端面试题(小整理)

vue中的生命周期钩子有哪些 beforeCreate&#xff1a; 在实例初始化之后&#xff0c;数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。 在此阶段&#xff0c;实例的属性和方法还未初始化。 created&#xff1a; 在实例创建完成后被立即调用。 可以访问…

文心一言VSchatGPT4

文心一言和GPT-4各有优势&#xff0c;具体表现在不同的测试场景下。 在某些测试场景中心一言的表现优于GPT-4&#xff0c;例如在故事的完整度和情节吸引力方面&#xff0c;文心一言表现得更加符合指令&#xff0c;情节更吸引人。这可能得益于其模型在训练时对中文语境的深入理…

选择电源自动化测试系统,要考虑哪些因素?

随着科技的发展以及市场需求的变化&#xff0c;手动测试以及传统自动化测试不足日益明显&#xff0c;已无法满足当前的电源测试需求&#xff0c;因此&#xff0c;选择全新的自动化测试系统成为必然趋势。那么&#xff0c;要如何选择可靠、高效的电源自动化测试系统呢&#xff1…

计算机网络——网络地址转换(NAT)技术

目录 前言 前篇 引言 SNAT&#xff08;Source Network Address Translation&#xff09;源网络地址转换 SNAT流程 确定性标记 DNAT&#xff08;Destination Network Address Translation&#xff0c;目标网络地址转换&#xff09; NAT技术重要性 前言 本博客是博主用于…