vue解决mintui中使用MessageBox弹窗，不进行任何操作（不点击确定或取消键）时跨页面显示的问题

在vue项目中用到MessageBox弹窗，不点击取消或者确定键，虽然在页面上不能进行改变路由的操作，但是在手机（运用android手机上的物理返回键）上进行页面的回退时，就会发现弹窗并没有消失，如果给弹窗的确定或者取消键绑定了改变路由回退什么的操作，有可能会出现问题（我的项目是嵌套在原生壳子内，如返回到上一页，并且弹窗的确定键也是路由的go(-1)的操作会直接退回到原生页面，这样就会报错）。
具体说明：
在详情页面弹出弹窗，如图所示：

点击确定键时执行后退一步的操作，用手机的物理返回键进行返回，可以返回到上一页面（列表页），但是不点击确定键的话弹窗本身依然显示，如下图所示：

要解决这个问题可以在弹窗出现时禁止使用物理返回键控制路由的跳转。
具体实现：
在vuex内定义一个全局的变量来控制这个路由是否可以返回,声明：
Store.js（存放vuex的地方）:

const state = {
  direction:'forward',
  includePage: [],
  routerFlag:true,
}
const getters = {
  direction: state => state.direction,
  includePage: state => state.includePage,
routerFlag:state => state.routerFlag,
}
const mutations = {
[types.UPDATE_DIRECTION] (state, update) {
      state.direction = update.direction;
},
[types.UPDATE_ROUTERFLAG] (state, update) {
     state.routerFlag = update;
  },
}

type.js（可集中声明vuex变量定义意思的地方）

export const UPDATE_DIRECTION = 'UPDATE_DIRECTION'  //更新routerview滑动方向
export const UPDATE_ROUTERFLAG = 'UPDATE_ROUTERFLAG' //路由返回

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

if(!store.getters.routerFlag) {//禁用路由返回
  next(false)
  return
}

放置位置如下图所示：

在使用这个弹窗方法的地方添加

store.commit("UPDATE_ROUTERFLAG", false)，点击按钮后改变这个值：
store.commit("UPDATE_ROUTERFLAG", true)

作为判断控制是否禁止路由返回的依据即可。
具体修改如下：

注：next的使用