出现这样的问题无非就是第一次进入项目之后，在微企浏览器添加了一条历史记录，之后由于授权成功回来，会再一次添加一条记录，所以我们解决的常规方法就是利用pushState方法加上关闭当前微信窗口API得以解决问题
history.pushState(null, null, document.URL)
如果页面组件作了缓存，就需要利用activated和beforeRouteLeave
activated() {
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)
window.addEventListener('popstate', this.goBack, false)
}
},
// 路由守卫
beforeRouteLeave(to, from, next) {
window.removeEventListener('popstate', this.goBack, false) // 跳转时需要清空浏览器添加的记录
next()
},
methods: {
goBack() { // 点击浏览器的返回触发的方法
let timer = setTimeout(function () {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
WeixinJSBridge.call("closeWindow");
},
false
);
//这个可以关闭ios系统的手机
WeixinJSBridge.call("closeWindow");
clearInterval(timer)
//这个可以关闭安卓系统的手机
}, 500)
this.$router.go(-2)
},
}
另外需要注意的是：
1.跳转到详情时，需要利用Router.replace（）跳转 ，否则如果跳转到详情再返回来首页列表 还是会出现返回两次才能正常退出项目。
2.因为在vue项目使用了微信WeixinJSBridge对象，此时会报错WeixinJSBridge为未定义，导致不能正常打开和打包发布，
所以当我们用vue实现调取微信api时，虽然WeixinJSBridge在微信内置浏览器中可以使用，但在脚手架编译或者发布时会提示WeixinJSBridge is not defined，使得我们无法调试也无法发布，无法验证功能。究竟改如何解决，这需要根据vue-cli的版本来设置，百度中大部分都没有提及。
vue-cli3之前的版本根目录下是有eslintrc.js的，直接在文件中增加"globals": {"WeixinJSBridge" : false}即可
如果是vue-cli3之后版本，需要在package.json中找到eslintConfig，然后增加"globals": {"WeixinJSBridge" : false}即可
至此，就可以编译通过正常调试和发布了。
（专卖店项目）
————————————————