vue beforeRouterLeave和elementUI $confirm组合的问题

路由守卫beforeRouterLeave可以在页面跳转前进行提示用户是否离开,从而避免一些用户的误触导致的页面内容未保存
而这次通过elementUI的$confirm添加提示的时候发现弹窗一闪而逝,闪了一下就不见了,但是路由还跳转了,页面还处在当前页面…

网上找了一圈,终于找到一个解决办法吧
地址:$confirm 在 vue-router 中 beforeRouteLeave 调用出现闪烁后消失情况

这个办法暂时能解决这个问题,暂时没找到其他好的方法
代码如下:

beforeRouteLeave (to, from, next) {
 next(false)
  setTimeout(() => {
    this.$confirm('确认退出编辑?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
    }).catch(() => { })
  }, 16) // 最好不要设置为0,设置为0的时候火狐有问题
}

你可能感兴趣的:(elementui,vue.js,路由守卫,beforeLeave)