前题条件:
vue要想监听浏览器回退按钮,需要两个东西的支持。
history.pushState(null, null, document.URL);
1.增加一个history的空状态 必须有这个空状态才能执行回退,否则你第一步就跳转了,需要一个空状态让他停再当前页上。
window.addEventListener('popstate', this.goBack, false);
2.监听回退,每次点击回退的时候执行goBack方法。
实现方法:
第一步先增加这俩:
// ----------------------------后退相关------------------------------------
// 挂载完成后,判断浏览器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL); //这里有没有都无所谓,最好是有以防万一
window.addEventListener('popstate', this.goBack, false);
// 回退时执行goback方法
}
},
// 页面销毁时,取消监听。否则其他vue路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.goBack, false);
}
第二步: 增加goback这个方法
goBack(){
if(this.pageIndex==5){
this.selLeftSlider(1,"noscroll");
return false;
}else{
this.$router.replace({path: '/'})
}
}
第三步:当你tab切换的时候,你就需要添加一个空状态
//打开选项卡
selLeftSlider(e, scroll) {
console.log(e);
this.pageIndex = e;
if (e == 2) {
this.isRouter = false;
this.getOrder();
this.userExpress();
} else if (e == 1) {
if (scroll == "noscroll") {
this.getCourseList("noscroll");
} else {
this.getCourseList();
}
} else if (e == 3) {
this.dataDownload();
} else if (e == 5) {
history.pushState(null, null, document.URL);
//这一步是关键 你不添加一个的话,下次你回退,就算你触发了goback函数,一样回跳回首页。
//因为history中不存在那个空路径。。
}
},