美文网首页前端开发那些事儿大前端vue
vue-router beforeRouteLeave 引发的问

vue-router beforeRouteLeave 引发的问

作者: 冷r | 来源:发表于2020-10-22 14:39 被阅读0次

用户需求是当用户在创建商品时,点击了左侧菜单,做一个离开提醒‘是否确定离开?’。
如下实现:
但是,出现一个问题:用户点击左上角浏览器回退按钮时,这个弹出提醒就会闪现,立马消失。
方法一
路由换成history
方法二

 beforeRouteLeave(to: any, from: any, next: any) {
    if (from.name === 'orderCreateStep2') {
      setTimeout(() => {
        this.$confirm('是否放弃创建该订单?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
          .then(() => {
            localStorage.removeItem('refundOrderInfo')
            next()
          })
          .catch(() => {
            next(false)
          })
      }, 200)
    } else {
      next()
    }
  }

相关文章

网友评论

    本文标题:vue-router beforeRouteLeave 引发的问

    本文链接:https://www.haomeiwen.com/subject/lgoumktx.html