js监听浏览器返回、后退、上一页按钮事件方法

一、监听浏览器事件

⼤家知道在页⾯中我们可以使⽤javascript window history，后退到前⾯页⾯，但是由于安全原因javascript不允许修改history
⾥已有的url链接，但可以使⽤pushState⽅法往history⾥增加url链接，并且提供popstate事件监测从history栈⾥弹出url。既然
有提供popstate事件监测，那么我们就可以进⾏监听。
返回、后退、上⼀页按钮点击监听实现代码：

window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
}, false);

二、增加一个url 

虽然我们监听到了后退事件，但是页⾯还是会返回上⼀个页⾯，所以我们需要使⽤pushState增加⼀个本页的url,代表本页，⼤
家都⾮常清楚是#

function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
}

三、完整代码 

当进⼊该页⾯，我们就给这个history压⼊⼀个本地的连接。当点击返回、后退及上⼀页的操作时，就进⾏监听，在监听代码中
实现⾃⼰操作。
下⾯是完整的代码：

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
} 
});

or 

const popStateHandle = function () {
     //处理逻辑
    }

onMounted(() => {
   window.history.pushState(null, null, '')
   window.addEventListener('popstate', popStateHandle, false)
     })
onUnmounted(() => {
    //销毁
   window.removeEventListener('popstate', popStateHandle)
    })