问题原因：在微信里只要发生页面跳转，这个控制浏览器前进后退的白色条就会出现。
方案1：经过查资料，很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar'); // 隐藏底部状态栏
WeixinJSBridge.call('hideOptionMenu'); // 隐藏右上角的三个点的选项
WeixinJSBridge.call('showToolbar'); // 显示底部状态栏
WeixinJSBridge.call('showOptionMenu'); // 显示右上角的三个点的选项
})
然而我试了下发现并没有效果，这个暂时只对企业微信有效。
方案2：this.$router.replace('/path')
这种方法可以很好的解决咱们的问题，但是需要自己写一个路由历史栈，去保存历史跳转的记录，然后监听路由返回，再从历史栈中去一个一个 回退，回退一个就移除掉一个。因为replace跳转方式是不存储路由的，也就是没法返回上一个页面，所以需要自己从历史栈中拿出最后一个存储的url再replace回去。
例子history=[{url：'a'},{url：'b'}]
当你进入第一个页面的时候将当前页面的url存储至history当中，全局的。当跳转进入b页面的时候使用replace。这样当前页面就显示b页面了。当需要继续跳转至C页面的时候在跳转之前判断一下要去的页面路由堆栈中是否存在。存在就取出来跳转将堆栈中的这一条记录移除，如果不存在就将当前页面路由保存至history，再replace到下一个页面。之后每当返回的时候都从历史堆栈中最后一个replace，然后移除就可以了。
历史路由堆栈的方法可以自己写，根据自己的思路写就行。。
网友评论