history.pushState 实际使用场景

场景1

B页面有个弹窗，点击返回，关闭弹窗，再次点击，返回到A页面

handlePopState(e) {
  this.back();
},

// 弹窗已存在，并且点击了返回事件，此时页面b.html?page=1--->b.html,并触发popstate事件
back() {
  // 页面在用户看来是没有刷新的，此时是关闭dialong
  this.testDialog?.hide();
},

// 打开详情弹窗
showDialog(item) {
  this.testDialog = this.$createDialog({
    type: 'alert',
    title: '我是标题',
    content: '我是内容',
    icon: 'cubeic-alert'
  })
  this.testDialog.show();

  // 此时页面地址为b.html?page=1,但是页面没有刷新。并且不会触发popstate方法
  history.pushState({page: 1}, "title 1", "?page=1");
}

mounted () {
  // 浏览器前进、后退的回调，回调参数是跳转后页面的参数
  window.addEventListener('popstate', this.handlePopState);
},
destroyed () {
  window.removeEventListener('popstate', this.handlePopState)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

场景2

【A—>B—>C—>D】：D页面不应该回到C页面

// D页面---->B页面
componentDidMount: function() {
    this.props.history.push('/d?page=1'); 
    // 如果有问题，加个setTimeout
    window.addEventListener('hashchange', (state) => {
        // hash改变就会触发
        const href = location.href;
        // 当前hash中不存在?page=1时触发(初始化刚进来是不会触发这个方法的)
        if (href.indexOf('?page=1') < 0) {
          this.back();
        }
    })
}

// 并且点击了返回事件，此时页面d.html?page=1--->d.html,并触发hashchange事件
back: function() {
    // 页面在用户看来是没有刷新的，此时是回到B页面
    // TODO
    this.props.history.go(-2)；
}

// 离开页面的时候取消监听hashchange
componentWillUnmount: function() {
    window.removeEventListener('hashchange', (state) => {
        this.back();
    }) 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

参考文章

移动端h5监听浏览器返回操作（目前在react项目中用到）