vue導航守衛beforeRouteLeave瀏覽器返回時,自定義彈窗提醒使用者儲存資訊
阿新 • • 發佈:2018-11-04
H5頁面中經常會遇到的情況,當前頁面點選返回,想要提示彈窗"是否確認離開當前頁面"之類的需求。自己試著看了一下網上的方法,大多是alert出系統彈窗。其實要實現自定義彈窗提示,也是很容易的。
從另一個頁面點選跳轉到當前頁(如下),點選瀏覽器返回按鈕,則會彈窗下面的彈窗,點選彈窗確定按鈕,頁面返回上一頁
完整程式碼:
<template> <div class="templ"> <div>123</div> <div class="deleteTip pubsontext" v-show="tipshow"> <div class="tipSon"> <p>確定要退出當前頁?</p> <div class="footerBut"> <span class="cancle" @click="tipColse">取消</span> <span class="sure" @click="tipBacks">確定</span> </div> </div> </div> </div> </template> <script> export default { data() { return { tipshow:false,//控制提示彈窗顯隱 backStatu: false,//判斷當執行頁面回退時是否要執行next(true); }; }, //監聽當前頁面返回事件 beforeRouteLeave(to, from, next) { //next方法傳true或者不傳為預設歷史返回,傳false為不執行歷史回退 if(this.backStatu){ next(true); }else{ next(false); } this.tipshow = true; }, methods: { tipColse() {//控制提示彈窗顯隱 this.tipshow = !this.tipshow; }, tipBacks() { this.backStatu = true; this.$router.go(-1); }, } } </script> <style> .deleteTip { height: 100%; width: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); top: 0; z-index: 4; } .pubsontext .tipSon { top: 30%; } .deleteTip .tipSon { text-align: center; position: absolute; left: 50%; transform: translate(-50%, -50%); margin: auto 0; background: #fff; border-radius: 0.2rem; padding: 1rem 0.4rem 0.5rem; } .pubsontext .tipSon p { text-align: center; font-size: 0.3rem; } .deleteTip .tipSon p { color: #000000; line-height: 0.42rem; padding-bottom: 0.5rem; } .deleteTip .tipSon .footerBut { display: flex; line-height: 0.7rem; font-size: 0.36rem; color: #666; } .deleteTip .tipSon .footerBut .cancle { background: #4293e5; color: #fff; margin-right: 0.1rem; } .deleteTip .tipSon .footerBut .sure { color: #4293e5; margin-left: 0.1rem; } .deleteTip .tipSon .footerBut .cancle, .deleteTip .tipSon .footerBut .sure { flex: 1; font-size: 0.36rem; border: 0.01rem solid #4293e5; border-radius: 0.5rem; } </style>
需注意,若頁面內有其他點選回退事件時,要留意是否會跟beforeRouteLeave事件衝突