1、监听 popstate ,按物理返回键 浏览器返回键 调用history.back()、history.forward()、history.go()方法也会触发
var isRun;
window.addEventListener('pageshow', function() { //pageshow 在load事件触发后触发
isRun = false;
setTimeout(function() {
isRun = true;
}, 1000); //延迟1秒 防止返回立即执行popstate事件
if(window.history && window.history.pushState) {
window.history.pushState(null, null, document.URL);
window.addEventListener("popstate", homeGoBack(), false);
}
})
homeGoBack(){
if(isRun) {
// 要触发的事件
}
}
window.addEventListener('pagehide', function() { // 浏览器卸载页面的时候触发,在unload事件之前触发
window.removeEventListener('popstate', homeGoBack(), false);
}
2、vue单页面通过 beforeRouteLeave 控制页面离开时的操作
export default{
data(){ return {} },
beforeRouteLeave(to, from, next) {
var problem = window.confirm('你还没保存,是否确认离开?')
if (problem==true) {
next(); //继续下一步
} else {
next(false); //阻止点击返回时事件离开该页面
}
}
}