正好碰到有业务踩到此坑做个笔记，当URL不跳转，但是又会进入另一个页面，但是此时用户按了返回键却直接退出了，所以要阻止默认事件，自己处理相应逻辑
或者在做登录的时候，从A→B→C，我需要从C直接回到A而不经过B，这个时候，就要拦截返回键自己来定义事件
解决方法是找到安卓返回键的事件，然后阻止掉它，并且指定返回的路径，代码如下：
|
1 2 3 4 5 6 7 |
// 页面载入时使用pushState插入一条历史记录 history.pushState(null, null, location.href); // 拦截安卓回退按钮(监听到返回事件) window.addEventListener('popstate', function (event) { history.pushState(null, null, location.href); //此处加入回退时你要执行的代码 }); |
其中location.href会自动获取到当前路径的url，添加到历史记录，然后每次点击都会先加入一次历史记录，然后再加入一次防止下次返回键触碰失效
好了，这样就能实现一种你想不让这个页面用户自己回退，或者返回键执行响应的方法，那么这个方法就很简单了。
ps:这个功能仅支持app中的，不带后退按钮的浏览器，也就是说页面中的返回按钮是我们自己写的事件那种。
以下是vue框架内的阻止默认事件使用方法，和正常使用JS区别不大
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
mounted() { // 按需使用：A→B→C就需要页面一进来的时候，就添加一个历史记录 window.history.pushState(null, null, document.URL); // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法 window.addEventListener("popstate", this.onBrowserBack, false); }, destroyed() { // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件 window.removeEventListener("popstate", this.onBrowserBack, false); }, watch: { // 弹框监听，当弹框显示的时候，pushState添加一个历史，供返回键使用 PopupShow: { handler(newVal, oldVal) { if (newVal.Terms === true) { window.history.pushState(null, null, document.URL); } }, deep: true } }, methods: { onBrowserBack() { // 这里写点击返回键时候的事件 // 比如判断需求执行back()或者go(-2)或者PopupShow=false隐藏弹框 } } |
