使用路由守卫判断是否离开当前页面
主要代码

	stauts1_didntSave: 0,
    stauts1: false,
    tableData1: [],

watch: {
  tableData1 (val) {
    if(val){
      this.stauts1_didntSave++
    }
    deep: true
    console.log('我是检测到变化')
  }
},

// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
	//stauts1_didntSave = 1的时候为获取数据，不是改变数据，大于1才是。
  if (this.stauts1_didntSave > 1 && this.stauts1 === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前信息未保存，离开页面将会放弃所有修改数据，', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行
      next()
    }).catch(() => {
  // 取消则关闭弹窗不执行
  })
  } else {
    // 条件不成立则继续往下执行
    next()
  }
},

完整代码

<!--
 * @Author: your name
 * @Date: 2021-06-10 15:47:08
 * @LastEditTime: 2021-06-10 19:16:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \client-platform-terminal\src\views\electronic-records\setting.vue
-->
<!--  -->
<template lang='pug'>
  .electronic-setting
    .tabs-box()
      el-tabs(v-model="activeName" type="card" @tab-click="handleClick")
        el-tab-pane(v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name")
    .category(v-show="activeName === '1category'")
      .button-box
        el-button(v-if="isEdit" type="primary" size="mini" @click="categoryEdit") 编辑
        el-button(v-if="!isEdit" type="primary" size="mini" @click="categorySave") 保存
        el-button( type="primary" size="mini") 预览
        el-button(v-if="!isEdit" type="primary" size="mini") 新增
      .content
        .text
          .span(style="padding: 5px 10px") 树节点组成：分类编号（供软件排序使用）、档案分类号、分类名称组成
          .span(style="padding: 5px 10px") 分类树每层各两位，最多支持6层，即12位，00为系统自动生成不可编辑，删除父节点会把子节点都删除
        .table-box
          el-table(:data="tableData1" border height="calc(100vh - 285px)")
            el-table-column(prop="id" label="分类编号" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.id" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.id" v-else)
            el-table-column(prop="name" label="分类名称" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.name" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.name" v-else)
            el-table-column(prop="no" label="档案分类号" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.no" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.no" v-else)
            el-table-column(label="操作" align="center" width="180")
              template(slot-scope="scope")
                span(@click=" " v-if="scope.row.id !== '00'" style="color: #0081f3") 删除
    //- xt-pagination(:total="total" @change="changePage" :page="pageForm.page") 
  //- el-input(v-model="scope.row.project_overview" v-if="stauts")
  //-   span(v-html="scope.row.project_overview" v-else)
</template>

<script>

export default {
name: '',
components: {},
data() {
  return {
    stauts1_didntSave: 0,
    stauts1: false,
    tableData1: [],
    isEdit: true,
    activeName: '1category',
    tabList:[{
      label: "分类设置",
      name: "1category"
    },{
      label: "案卷记录字段设置",
      name: "2records"
    },{
      label: "文件记录字段设置",
      name: "3file"
    },{
      label: "查询设置",
      name: "4search"
    }]
  }
},
computed: {},
watch: {
  tableData1 (val) {
    debugger
    if(val){
      this.stauts1_didntSave++
    }
    deep: true
    console.log('我是检测到变化')
  }
},
methods: {
  //保存tableData1编辑
  async saveSettingClass() {
    let res = await this.$api.saveSettingClass({classes: this.tableData1})
    debugger
    // console.log("getSettingClassList")
    // console.log(res)
  },
  //tableData1获取数据
  async getSettingClassList() {
    let res = await this.$api.getSettingClassList()
    this.tableData1 = res.result.data
  },
  //编辑模式
  categoryEdit() {
    this.isEdit = false
    this.stauts1 = true //input打开
    console.log("tableData1")
    console.log(this.tableData1)
  },
  //保存
  categorySave() {
    this.isEdit = true
    this.stauts1 = false //input关闭
    this.saveSettingClass()
    //
    console.log("tableData1")
    console.log(this.tableData1)
    debugger
  },
  handleClick(tab, event) {
    // console.log(tab, event);
  }
},
created() {
  this.getSettingClassList()
},
mounted() {
  
},
// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
  if (this.stauts1_didntSave > 1 && this.stauts1 === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前信息未保存，离开页面将会放弃所有修改数据，', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行
      next()
    }).catch(() => {
  // 取消则关闭弹窗不执行
  })
  } else {
    // 条件不成立则继续往下执行
    next()
  }
},
}
</script>
<style lang="scss" scoped>
.electronic-setting {
  width: 100%;
  height: calc(100vh - 170px);
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  .tabs-box {
    /deep/ .is-active{
      background-color: #409EFF !important;
      color: white !important;
    }
  }
  .category {
    .button-box {
      padding-left: 20px;
    }
    .content {
      .table-box {

      }
    }
  }
}
</style>