image.png

image.png

tabs组件代码

<el-tabs v-model="activeTab" type="card" :before-leave="beforeLeave">
 <el-tab-pane label="用户信息" name="basicInfo">
  用户信息表单
 </el-tab-pane>
 <el-tab-pane v-if="code" label="用户角色" name="userRole">
  用户角色列表
 </el-tab-pane>
</el-tabs>

方法（二选一）

    // 方法一使用promise的reject()
    beforeLeave(item) {
      var p = new Promise((resolve, reject) => {
        this.$confirm('离开将不保存本页修改', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 你可以在这儿做些操作
          resolve()
        }).catch(err => {
          // 你可以在这儿做些操作
          reject(err)
        })
      })
      return p
    },
    // 方法二使用了throw new Error()阻断js
    beforeLeave(item) {
      return this.$confirm('离开将不保存本页修改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {
        throw new Error('取消成功！')
      })
    },

PS

都会在控制台有一个报错提示的小瑕疵，我也没想到更好的办法，哪位大神如果有，务必留言，感激不尽。