新增修改页面路由离开前判断表单变化

src/views/contactsUnit/add.vue

 <template>
   <div class="contactsUnitAdd">
-    <div class="addTitle">{{$route.query.type === 'add' ? '新增往来单位'
+    <div class="addTitle">{{ $route.query.type === 'add' ? '新增往来单位'
       :$route.query.type === 'update' ? '修改往来单位'
         :$route.query.type === 'details' ? '查看往来单位': '' }}</div>
     <el-form ref="form" inline :model="form" :disabled="$route.query.type === 'details'" label-width="auto" label-position="right">
@@ -135,6 +135,23 @@ export default {
         ZETPSPROPERTY: '',
         ZCOMPYREL: '',
         ZBPNATURE: ''
+      },
+      saveForm: {
+        ZBPNAME_ZH: '',
+        ZBPTYPE: '',
+        ZOIBC: '',
+        ZBPNAME_EN: '',
+        ZBPNAME_LOC: '',
+        ZUSCC: '',
+        ZBRNO: '',
+        ZTRNO: '',
+        ZOSRNO: '',
+        ZIDNO: '',
+        ZSSNO: '',
+        ZZCOUNTRY: '',
+        ZETPSPROPERTY: '',
+        ZCOMPYREL: '',
+        ZBPNATURE: ''
       }
     }
   },
@@ -143,9 +160,29 @@ export default {
       this.getDetail()
     }
   },
+  beforeRouteLeave(to, from, next) {
+    if (this.agreeBack) { next() } else {
+      if (JSON.stringify(this.form) !== JSON.stringify(this.saveForm)) {
+        this.$confirm('您已经对信息进行了修改，离开后不会保存您所做的更改,是否确定离开?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          closeOnHashChange: false
+        }).then(() => {
+          this.agreeBack = true
+          this.$router.replace(to.path)
+        }).catch(() => {
+        })
+      } else {
+        this.agreeBack = true
+        this.$router.replace(to.fullPath)
+      }
+    }
+  },
   methods: {
     getDetail() {
-      this.form = this.$route.query.data
+      this.form = JSON.parse(JSON.stringify(this.$route.query.data))
+      this.saveForm = JSON.parse(JSON.stringify(this.$route.query.data))
     }
   }
 }