?

在vue項目中用到mintUI的MessageBox彈窗，不點擊取消或者確定鍵，之后多次在手機（運用android手機上的物理返回鍵）上進行頁面的回退時（或者通過瀏覽器回退時），返回的頁面并不是上一頁的頁面（詳情頁面）（點擊一次返回按鈕時，顯示的頁面正確）
具體說明：

點擊確定鍵時執行后退一步的操作，用手機的物理返回鍵進行返回，可以返回到上一頁面（詳情頁面），但是不點擊確定鍵的話彈窗本身依然顯示，這次單次點擊后應返回頁面的詳情頁路由，如下圖所示：

這次單次點擊后應返回頁面的詳情頁路由（不正確），如下圖所示：

解決這個問題在彈窗出現時禁止使用物理返回鍵控制路由的跳轉

具體實現：
在vuex內定義一個全局的變量來控制這個路由是否可以返回：
vuex中存放：

?const state = {routerFlag: true } const getters = {routerFlag: state => state.routerFlag } const mutations = {updateRouterFlag (state, update) {state.routerFlag = update} }export default {state,getters,mutations }

使用：
在main.js中的router.beforeEach內添加：

router.beforeEach((to, from, next) => {console.log('to: ', to)console.log('store.getters.routerFlag: ', store.getters.routerFlag)if (!store.getters.routerFlag) {next(false)return}next() })

注意在創建vue實例前寫，不然不起作用
放置位置如圖所示：
在使用這個彈窗方法的地方添加

this.$store.commit('updateRouterFlag', false) this.$store.commit('updateRouterFlag', true)

作為判斷控制是否禁止路由返回的依據即可。
具體修改如下：
confirm（點擊確認）中調用this.$router.back()，因為main.js中已經執行完成，router.beforeEach已經完成攔截，點擊確認按鈕后，無法正確返回上一頁，所以需要重新調用一次返回，才可以正確的返回詳情頁面（這里我覺得代碼邏輯有些不正確，但是確實解決了我的問題【在有彈框攔截的情況下，多次選擇返回，點擊確認后，返回的頁面不正確】，這個解決方法先記錄下來，等以后更深入理解后，再進行修改）

遇到的問題：
在beforeRouteLeave()中，如果不進行next()，直接攔截的話，是不會執行main.js中router.beforeEach()的，這時候多次返回，是不會起攔截作用的

參考：https://blog.csdn.net/zuoyiran520081/article/details/86749527

總結

以上是生活随笔為你收集整理的vue解决mintui中使用MessageBox弹窗拦截，移动端多次点击手机的物理返回键，选择确定后页面返回不正确问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。