vue3项目监听浏览器的返回按键事件

ops/2024/9/23 8:46:41/

有这样一个需求,当在用户在浏览器点击返回按钮的时候,需要弹出当前组件的退出确认框。并且如果当前页面有个已经打开了的弹窗时,弹窗还没关闭就点击浏览器的返回按钮,要求点击返回时,弹窗要关闭。

解决:

javascript">import { onMounted, onUnmounted } from 'vue';// 浏览器返回时的 TODO
const handlePopState = () => {console.log('222222');
};
onMounted(() => {// 监听浏览器的返回按钮事件 popstatewindow.addEventListener('popstate', handlePopState);
});
onUnmounted(() => {// 移除浏览器的返回按钮事件 popstatewindow.removeEventListener('popstate', handlePopState);
});

当组件被挂载时,添加了一个popstate事件监听器。当用户点击浏览器返回按钮时,会触发popstate事件。在组件被卸载时,确保移除事件监听器,避免内存泄漏。


http://www.ppmy.cn/ops/109568.html

相关文章

使用Python实现多个PDF文件的合并

使用Python可以很方便地实现多个PDF文件的合并。我们可以使用PyPDF2库来完成这个任务。以下是一个实现PDF合并的Python脚本: import os from PyPDF2 import PdfMergerdef merge_pdfs(input_dir, output_filename):# 创建一个PdfMerger对象merger PdfMerger()# 获取…

【深度学习】Pytorch基础

目录 梯度下降算法(Gradient Descent)代码实现 梯度下降算法(Gradient Descent) 梯度下降算法在机器学习中应用十分的广泛,不论是在线性回归还是Logistic回归中,它的主要目的是通过迭代找到目标函数的最小…

【网络安全】古典密码体制概述

1. 古典密码体制概述 1.1 定义与历史背景 古典密码体制是指在计算机科学和信息安全技术出现之前的传统加密方法。这些方法主要包括替换和易位两种基本形式。古典密码体制的特点是简单、易用,但安全性不高,容易被破解。在古代,人们使用纸、笔…

java发送邮件报错,Could not connect to SMTP host: smtp.exmail.qq.com, port: 465

发现问题 我使用的 docker 运行的 jdk 环境,服务调用发送邮件报错 javax.mail.MessagingException: Could not connect to SMTP host: smtp.exmail.qq.com, port: 465;nested exception is:javax.net.ssl.SSLHandshakeException: No appropriate protocol (protoc…

【数据结构】排序算法系列——希尔排序(附源码+图解)

希尔排序 算法思想 希尔排序(Shell Sort)是一种改进的插入排序算法,希尔排序的创造者Donald Shell想出了这个极具创造力的改进。其时间复杂度取决于步长序列(gap)的选择。我们在插入排序中,会发现是对整体…

店匠科技携手Stripe共谋电商支付新篇章

在全球电商行业蓬勃发展的背景下,支付环节作为交易闭环的核心,其重要性日益凸显。随着消费者对支付体验要求的不断提高,以及跨境电商的迅猛发展,支付市场正经历着前所未有的变革与挑战。在这一充满机遇与竞争的领域,店匠科技(Shoplazza)凭借其创新的嵌入式支付解决方案—— Sho…

Apache SeaTunnel基础介绍

一、什么是Apache SeaTunnel? Apache SeaTunnel(最初名为Waterdrop)是一个开源的分布式数据集成平台,专为大规模数据处理设计。SeaTunnel可以从多种数据源读取数据,进行实时流式处理或批处理,然后将处理后…

T2打卡——彩色图片分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者:K同学啊 1.导入数据: #设置gpu import tensorflow as tf gpustf.config.list_physical_devices(GPU) if gpus:#如果有多个gpu仅使用第一个gpu0gpus[0]#设置…