Vue.js 禁止用户在还未保存修改前突然离开.

在项目中会经常遇到编辑页面的途中想要离开，如何提示用户，“此页面未保存，确定离开吗？”
在Vue Router 导航守卫中有一个组件内守卫：beforeRouteLeave
用法：

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

当用户编辑途中离开时，浏览器会跳出弹窗，提示用户是否离开(提示框为浏览器自带的提示框)。
如果使用框架，想要使用框架组件做提示的话，如下所示：
element ui+vue.js 做用户未保存修改离开提示

beforeRouteLeave(to, from, next) {
   if (this.clickNextBtn) {//如果页面未修改，直接跳转，不弹出提示
     next();
   } else if (this.isCanSubmit) {  //如果已经保存页面了，不弹出提示
     next();
   } else {
     this.$confirm(//自定义提示弹窗
       "You have unsaved changes in this page. Do you want to leave without saving?",
       {
         cancelButtonText: "Cancel",
         confirmButtonText: "Yes",
         closeClickModel: false
       }
     )
       .then(() => {
         next();
       })
       .catch(() => {
         next(false);
       });
   }
 },

样式如图：

1.png