拦截微信浏览器左上角返回按钮的方法

　　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。最让人头疼就是返回直接页面就关闭。下次进入用户都找不到入口。下面用vue 来实现进行拦截逻辑处理。看看京东购物公众号效果：

操作思路：

　　demo 里建立了两个 vue 页面( first 和 two )，第一个页面跳转到到第二个页面。然后在第二个页面弹出一个蒙层，这时点击左上角返回时，并不是返回 first，而是先将蒙层消失，再次点击返回时才是返回上一页；实现效果如下：

1. 在第二个页面 mounted 方法中加入，添加监听返回事件方法。当返回按钮被点击时，这里让弹出的蒙层隐藏；

mounted() {
    let that = this;
    // 添加返回事件监听
    window.addEventListener("popstate", function(e) {
      that.isShowTestDiv = false;
    }, false);
  },

2. 监听蒙层，当它显示时，在window.history(历史堆栈)中添加一条记录；

 watch: {
    isShowTestDiv: function(newVal, oldVal) {
      if (newVal === true) {
        this.pushHistory();
      }
    }
  }

3. 最后弹出的蒙层如果用户点蒙层上相关操作将蒙层关闭，那么要手动将自己添加的那条记录从 history 中移除，在 vue 中将路由 back 一下即可。

pushHistory() { // 修改history
      var state = {
        title: "",
        url: "/two" // 这个url可以随便填，只是为了不让浏览器显示的url地址发生变化，对页面其实无影响
      };
      window.history.pushState(state, state.title, state.url);
    },

注意：window.addEventListener 添加的事件回调会一直存在，因为 Vue 实例销毁时，window 对象并不会销毁。可以在它的回调里打印，会发现在 two 之外的页面点返回也会进入它的方法。但因为 two 页面内对象数据都已销毁，所以进了此方法也无任何问题。如果不想让其进入，可以用存储一些全局变量加入 if 判断，在 two 页面 destroyed 等相关勾子函数将这个全局变量置成想要状态；或者在全局路由勾子方法中设置相关全局变量也可以。

　　之前有尝试在 two 的 destroyed 方法内，通过 window.removeEventListener 移除添加的方法，但发现无效果。可能 popstate 是微信内置方法，不能被移除。
本来转载：http://www.cnblogs.com/buerjj/p/7868739.html

模板简介：该模板名称为【拦截微信浏览器左上角返回按钮的方法】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【公众号教程】栏目查找您需要的精美模板。