vue浏览器返回监听

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 618 | 阅读时长 ≈ 1 分钟

1. 挂载完成后，判断浏览器是否支持popstate

1
2
3
4
5
6
7
8
9
10
11
12
13
    mounted(){
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
      }
    }
``` 

### 2\. 页面销毁时，取消监听。否则其他vue路由页面也会被监听
``` javascript
    destroyed(){
      window.removeEventListener('popstate', this.goBack, false);
    }

3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

1
2
3
4
5
6
methods:{
  goBack(){
    this.$router.replace({path: '/'});
    //replace替换原路由，作用是避免回退死循环
  }
}