如何通过Vue拦截微信浏览器左上角返回按钮？

本文共计1209个文字，预计阅读时间需要5分钟。

【需求】在微信公众号开发中，有时需要实现对浏览器左上角返回按钮进行截断处理相关的页面逻辑，而并非让页面直接返回上一页，目前在这个环节的实现不是很好。

　　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以自己也开始了这方面的尝试。京东的效果如下图：

从上图京东购物效果上来看，在点击搜索拉起一个搜索界面，然后点击左上角反回，只是将搜索界面收起，而页面没有重新像读取进度条一样去返回，而我页面需要的正是这样的效果，下面就用vue来做一个这个过程的 demo 吧。

　　微信左上角的返回按钮其实无法被拦截，但是可以监听到这个返回事件。

　　要想真正拦截返回事件，可以当前页面先向 window.history 中添加一个记录(实际只是在历史记录堆栈中添加一条记录 pushState，浏览器并不会真正去加载这个路径)，当点击返回时，监听到返回事件处理自己想处理的逻辑，反正微信它是一定要执行返回，刚添加的那条记录就会从 window.history 拿出并将此路径替换当前页面路径。注意：这里只是路径的替换，只是将路径换了个名字，并不是会真正去加载这个路径。

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

　　1. 在第二个页面 mounted 方法中加入，添加监听返回事件方法。