vue禁用后退前进功能（键盘回退、鼠标回退键）

Vue程序在浏览器中禁用后退功能（键盘回退、鼠标回退键）

引出

采用CefSharp.ChromiumWebBrowser开发项目当中，当鼠标点击侧边键时，会直接退出到登录页面，后续无法进行操作，要求禁用鼠标的回退键，防止以上事情发生。

采用popstate事件实现禁用页面回退功能

每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的 window 对象上触发。如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的，则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。

备注

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。

popstate参考

history 方法属性

属性

• history.length 历史回话中元素条目
• history.scrollRestoration: 允许web应用程序在历史导航上显示设置默认滚动恢复行为（auto、manual）
• history.state 返回一个标识历史堆栈顶部状态，不必等待popstate事件而查看状态的方式

方法

• history.back()
• history.forward()
• history.go()
• history.pushState()

Vue 禁用回退功能

1. 在main.js中增加popstate监听事件

window.addEventListener("popstate",function(){
  history.pushState(null,null ,document.URL)
})

2. 在路由文件中谈价scrollBehavior属性

const router = new Router({
 mode: 'hash',
 routes,
 scrollBehavior: () => {
  history.pushState(null, null, document.URL)
 }
})