在做一些重要资料填写的时候, 我们基本都会阻止一下浏览器的回退, 刷新等等, 今天我们主要针对回退, 做一次讲解。
对于阻止浏览器回退, 我们可以注册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_eventpushState: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushStateconfirm: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm
今天, 我们就学习到这里
我们明天见
