vue項目微信回退按鈕處理

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
        <meta name="MobileOptimized" content="360"/>
        <style>
            html{font-size: calc(100vw / 3.75)}
            body,html{
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            body{
                font-size: 14px;
                background: rgba(251,251,253,1);
                color: #000;
                font-family:"PingFang SC","microsoft yahei";
            }
            .flex{display:flex;display:-webkit-flex;}
            .jc-center{justify-content:center;-webkit-justify-content:center;}
            .ai-center{align-items:center;-webkit-align-items:center;}
            .fd-column{flex-direction:column;-webkit-flex-direction:column;}
            .noActivity{
                height: 100%;
                text-align: center;
            }
            .noAcitivityMain{
                height: 90%;
                color: #4D5061;
            }
            .noAcitivityMain img{
                width: 1.8rem;
                max-width: 249px;
                max-height: 249px;
            }
            .noAcitivityMain .notice{
                margin-top: 3vh;
                color: rgba(51,53,65,0.5);
            }
        </style>
    </head>
    <body>
        <div class="noActivity relative" id="succOrder">
            <div class="noAcitivityMain flex ai-center jc-center fd-column">
                <img src="img/succOrder.png" alt="" />
                <div class="bold succorder">預定成功！</div>
                <div>您已成功預定，</div>
                <div>稍後咱們會推送給您預定成功的消息</div>
            </div>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            vm = new Vue({
                  el: '#succOrder',
                  data:{
                  },
                  mounted(){
                      //監測回退
                      history.pushState(null, null, document.URL)
                    window.addEventListener('popstate', this.forbidback);
                  },
                  beforeDestroy(){
                      //銷燬
                      window.removeEventListener('popstate',this.forbidback);
                  },
                  methods: {
                      forbidback(){
                          //回退按鈕點擊處理
                          alert('kkkk');
                      }
                  }
            })
        </script>
    </body>
</html>