在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.$mit('updateRouterFlag', false)this.$mit('updateRouterFlag', true)
作为判断控制是否禁止路由返回的依据即可。
具体修改如下：
confirm（点击确认）中调用this.$router.back()，因为main.js中已经执行完成，router.beforeEach已经完成拦截，点击确认按钮后，无法正确返回上一页，所以需要重新调用一次返回，才可以正确的返回详情页面（这里我觉得代码逻辑有些不正确，但是确实解决了我的问题【在有弹框拦截的情况下，多次选择返回，点击确认后，返回的页面不正确】，这个解决方法先记录下来，等以后更深入理解后，再进行修改）
遇到的问题：
在beforeRouteLeave()中，如果不进行next()，直接拦截的话，是不会执行main.js中router.beforeEach()的，这时候多次返回，是不会起拦截作用的
参考：/zuoyiran51/article/details/86749527
vue解决mintui中使用MessageBox弹窗拦截 移动端多次点击手机的物理返回键 选择确定后页面返回不正确问题
