Vue程序在浏览器中禁用后退功能（键盘回退、鼠标回退键）
引出
采用CefSharp.ChromiumWebBrowser开发项目当中，当鼠标点击侧边键时，会直接退出到登录页面，后续无法进行操作，要求禁用鼠标的回退键，防止以上事情发生。
采用popstate事件实现禁用页面回退功能
每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的 window 对象上触发。如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的，则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。
备注
调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。文章来源：https://www.toymoban.com/news/detail-753693.html
popstate参考文章来源地址https://www.toymoban.com/news/detail-753693.html
history 方法属性
属性
- history.length 历史回话中元素条目
- history.scrollRestoration: 允许web应用程序在历史导航上显示设置默认滚动恢复行为（auto、manual）
- history.state 返回一个标识历史堆栈顶部状态，不必等待popstate事件而查看状态的方式
方法
- history.back()
- history.forward()
- history.go()
- history.pushState()
Vue 禁用回退功能
- 在main.js中增加popstate监听事件
window.addEventListener("popstate",function(){
history.pushState(null,null ,document.URL)
})
- 在路由文件中谈价scrollBehavior属性
const router = new Router({
mode: 'hash',
routes,
scrollBehavior: () => {
history.pushState(null, null, document.URL)
}
})
到了这里，关于vue禁用后退前进功能（键盘回退、鼠标回退键）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
