vue有没有办法监听 浏览器地址栏回车
最佳答案
0
没找到最终实现方案 ，伪代码
看到一篇文章 说是判断 两次时间差来对比，，大于多少毫秒就是刷新，否则就是关闭页面重新打开，没啥效果
setup() {
const tabStore = useMultipleTabStore()
const gap_time = ref(0)
const beforeUnload_time = ref(0)
// 关闭窗口之前执行
const beforeunloadHandler =(event:Event)=> {
event.preventDefault();
event.returnValue = true
beforeUnload_time.value = new Date().getTime();
}
const unloadHandler =(event:any)=>{
gap_time.value = new Date().getTime() - beforeUnload_time.value;
//判断是窗口关闭还是刷新 毫秒数判断
if (gap_time.value <= 10) {
// 退出登录接口 这里应当换为个人的登出方法
}
}
onUnmounted(()=>{
// 移除监听
window.removeEventListener("beforeunload", (event)=>beforeunloadHandler(event))
})
onMounted(()=>{
// 监听浏览器关闭
window.addEventListener('unload', (event)=>unloadHandler(event))
window.addEventListener("beforeunload", (event)=>beforeunloadHandler(event) );
})
}
})
其他回答(3)
0
监听enter键点击事件，这样行吗？
@人间春风意: 浏览器导航栏的搜索框没法检测到~~~
@敲代码挣彩礼: 实在不行，看你是兼容所有浏览器，还是特定浏览器，如果你的前端是全局的，应该可以根据对应的id或class获取到元素，监听元素的点击事件，但是如果浏览器要兼容很多种，那我建议换一个实现需求的思路
你的需求是什么？
@人间春风意: 我说一下吧，就是 主管需求： 不管什么方式， 就是用户在浏览器有刷新这样的操作，就必须提前出来
比如f5 刷新
浏览器刷新按钮
回车刷新，这里之前都要弹窗二次确认
@敲代码挣彩礼: 按键只能监听到，enter，和 f5
可以看看window的刷新监听方法
https://blog.csdn.net/weixin_42987525/article/details/126309805
@人间春风意: 谢谢了， md 我躺牌了
0
0
你主管这是想拿公交车当私家车用呢
你监听这个的目的是什么
– 默卿 2年前@默卿: 如果在这里回车了，就要先提示 一个confirm
– 敲代码挣彩礼 2年前