vue中禁止浏览器后退

方式一：

效果

存在回退按钮，点击回退会刷新当前页面（原理：回退页面再跳转会当前页面，回一次加一次）；
保留浏览器返回按钮，每次返回提示保存游戏；

原文

https://www.cnblogs.com/yn-cn/p/12766988.html

vue项目中处理浏览器后退问题

阻止某一个界面不能使用浏览器的后台按钮的方法
activated () {
history.pushState(null, null, document.URL);
window.addEventListener(‘popstate’, function () {
history.pushState(null, null, document.URL);
});
}


标签: 浏览器后退问题, vue

使用记录

app.vue:
window.addEventListener(‘popstate’, function (params) {
history.pushState(null, null, document.URL)
if (window.RuntimeEnvironment !== ‘wd’) {
vm.func()
}
}, false)
router.js:
router.beforeEach((to, from, next) => {
let path = window.location.href.replace(from.path, to.path)
history.pushState(null, null, path)
// 或：history.replaceState(null, null, path)
if (!to.query.G) {
next({
path: to.path,
params: { params },
query: {
…params,
C: localStorage[ChannelId${localStorage.fullPath}]
}
})
} else {
next()
}

方式二：

效果

没有返回按钮，没有浏览器浏览记录，所有路由跳转需要用replace；

浏览器记录仅有当前一条，无历史记录，不存在返回，同时没有返回操作不会弹出保存游戏提示；

原文

https://segmentfault.com/q/1010000013416867

• Muse：
  replace 一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。
  1 回复 2018-06-12
  
• 大师兄：
  花裤衩大神是这样解释的，虽然我没看懂：
  next({ …to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record