vue 开发 window.addEventListener('popstate',..)

vue中在mounted中使用了两个监听 window.addEventListener('popstate',.....)其中的方法不一样但是不生效;单独使用的话是生效的

这个问题怎么解决呀求解

methods:{
 goBack() {
      window.history.back()
      history.pushState(null, null, document.URL)
    },
},


mounted(){

// 第一个监听addEventListener

 var that = this

    let name = that.$route.query.name

    history.pushState(null, null, document.URL)

    window.addEventListener(

      'popstate',

      (e) => {

        e.preventDefault()

        history.pushState(null, null, document.URL)

        that.$router.push({

          path: '/',

          query: {

            name,

          },

        })

        // console.log(mode)

        // console.log("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能

      },

      false

    )

//第二个监听 addEventListener 

 if (window.history && history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
}

应该是覆盖了，后面的覆盖前面的

我试了一下不会覆盖啊难道vue做了特殊处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抛物线</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* width: 500px;
            height: 700px; */
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="b" id="b">66</div>
    </div>


</body>
<script>
    let b = document.getElementById("b");
    b.addEventListener('click', () => {
        console.log("11")
    })
    b.addEventListener('click', () => {
        console.log("88")
    })

</script>

</html>