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中不存在那个空路径。。
    }
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。