js注册popstate事件并阻止浏览器返回

在做一些重要资料填写的时候, 我们基本都会阻止一下浏览器的回退, 刷新等等, 今天我们主要针对回退, 做一次讲解。

对于阻止浏览器回退, 我们可以注册popstate事件, 这个事件可以在我们同文档激活不同历史记录的时候被触发, 我们不妨尝试一下

onMounted(() => {
window.addEventListener(‘popstate’, onPopState, false);
})
随后, 需要在组件实例被卸载之后, 将该事件移除

onUnmounted(() => {
window.removeEventListener(‘popstate’, onPopState)
})
我们注册完popstate事件, 我们让其打印一句话

点击浏览器的回退按钮之后, popstate事件被触发, 打印了监听到了四个字, 但是, 并不是所有激活历史记录的方式都会被触发该事件, 比如pushState和replaceState就不会触发popstate事件

这不正合我意, 我们只需要使用pushstate往历史栈中增加条目, 并且该方法也不会触发popState, 两者结合, 正好可以解决这个问题

所以, 我打算在注册popState事件前, 将当前路径push进去

window.history.pushState(null, ”, location.href);
随后, 我们使用window的confirm方法, 提示用户选择, 只有点击确定, 才会移除popstate事件并跳转页面, 点击取消才会继续留在当前页面,

这样, 我们的功能就实现了

我们看一下大致效果

popstate: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
pushState: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
confirm: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm
今天, 我们就学习到这里

我们明天见