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);
                  },
　　　　　　　　　　　created(){
　　　　　　　　　　　　  // xxxxxxxxxxxxxxxx
                      // xxxxxxxxxxxxxxxx
　　　　　　　　　　　},
                  beforeDestroy(){
                      //销毁
                      window.removeEventListener('popstate',this.forbidback);
                  },
                  methods: {
                      forbidback(){
                          //回退按钮点击处理
                          alert('kkkk');
                      }
                  }
            })
        </script>
    </body>
</html>

 【注意】这样写不是很好，应该将监听 `popstate` 事件与销毁 `popstate` 事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差

　　　　　　　　　　　mounted() {
                      //监测回退
                      history.pushState(null, null, document.URL)
                      window.addEventListener('popstate', this.forbidback);
                      // 通过hook监听组件销毁钩子函数，并取消监听事件
                      this.$once('hook:beforeDestroy', () => {
                         // 销毁
                         window.removeEventListener('popstate', this.forbidback);
                      })
                  },
                  created() {
                      // xxxxxxxxxxxxxxxx
                      // xxxxxxxxxxxxxxxx
                  },
                  methods: {
                    forbidback() {
                       //回退按钮点击处理
                       alert('kkkk');
                    }
                  }

 

posted @ 2019-03-05 14:25  rachelch  阅读(516)  评论(0)  编辑  收藏  举报