<!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'); } }