vue：监听浏览器返回按钮

前题条件：

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中不存在那个空路径。。
    }
},