h5 浏览器返回拦截

web应用在开发过程中，不可避免会遇到这样一种需求，例如：A --> B --> C ,当用户在C页面点击返回按钮时，不要返回B而是返回A页面或者D、E、F等页面，那要如何实现呢？

这里我们以Vue项目为例，提供一下具体代码：

1、新建common文件

//common.js
let goBackFn = {
  addEvent : (type,fun) =>{
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate',type=='2'?fun:WeixinCloseWindow, false);
    }
  },
  removeEvent : (type,fun) =>{
    window.removeEventListener('popstate',type=='2'?fun:WeixinCloseWindow, false);
  }
},
//退出微信公众号
WeixinCloseWindow = ()=>{
  //这个可以关闭安卓系统的手机
  document.addEventListener("WeixinJSBridgeReady",()=>{WeixinJSBridge.call("closeWindow")},false);
  //这个可以关闭ios系统的手机
  WeixinJSBridge.call("closeWindow");
};

export {
  goBackFn,
  WeixinCloseWindow
};

2、引用goBackFn方法

不传参，默认关闭微信公众号

import {goBackFn} from '$common';

mounted () {
	goBackFn.addEvent() 
},
destroyed(){
    goBackFn.removeEvent();
}

传参，自定义返回时的操作

import {goBackFn} from '$common';

methods :{
	goBackUserPageFn (){
		console.log('点击浏览器返回按钮')
	}
},
mounted () {
    goBackFn.addEvent('2',this.goBackUserPageFn);
},
destroyed(){
    goBackFn.removeEvent('2',this.goBackUserPageFn);
}

//$common 配置可以去看
Vue二级目录部署&多环境打包部署（一）
Vue二级目录部署&多环境打包部署（二）