(有bug)使用路由守卫判断是否离开当前页面

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

1. 数据初始化

	//路由守卫判断的条件，要独立开，不能被其他事件改变的，只有监听的事件能改变
	saveNum: 0,
	hadEdit: false, 
	
	//要监听的数据
    tableData1: [], 
    

2.事件监听，我这里主要是因为需要监听用户更改，多套了一层hasInputChange事件，如果没有子父组件把主要代码写在一个vue文件即可

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

3.数据被修改，触发的事件

  hasInputChange(aa) {
    if(aa) {
    //编辑未保存状态下弹框 路由改变判断的条件在这里
      this.saveNum++
      this.hadEdit = true
      this.inputChange = true
      let editMessage = [this.saveNum,this.hadEdit,this.inputChange]
      //向父组件传值
      this.$emit('getEditMessageFromCategory', editMessage)
    }
  },

路由跳转判断

// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
	//stauts1_didntSave = 1的时候为获取数据，不是改变数据，大于1才是。
  if (this.saveNum > 1 && this.hadEdit === true && this.inputChange === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前修改未保存，是否保存？', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行,这里写你想要跳转之前的事件方法
      this.$refs.category.saveSettingClass()//这里是执行我子组件保存数据的方法
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      //接下来的跳转动作
      next()
    }).catch(() => {
  // 取消则关闭弹窗不执行
  })
  } else {
    // 条件不成立则继续往下执行
    next()
  }
},

完整代码（父组件）

<!--
 * @Author: your name
 * @Date: 2021-06-10 15:47:08
 * @LastEditTime: 2021-06-11 11:36:13
 * @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-setting(ref="category" v-show="activeName === 'category'" @getEditMessageFromCategory="getCategoryMessage")
    
</template>

<script>
import categorySetting from './component/category-setting.vue'
export default {
name: '',
components: {
  categorySetting
},
data() {
  return {
    //用于分类设置组件传过来的值赋值
    saveNum: 0,
    hadEdit: false,
    inputChange: false,
    //
    activeName: 'category',
    tabList:[{
      label: "分类设置",
      name: "category"
    },{
      label: "案卷记录字段设置",
      name: "records"
    },{
      label: "文件记录字段设置",
      name: "file"
    },{
      label: "查询设置",
      name: "search"
    }],
    props: {
      // title: {
      //   type: String,
      //   default: ''
      // },
    }
  }
},
computed: {},
watch: {},
methods: {
  //获取子组件的值(分类设置)
  getCategoryMessage(editMessage) {
    this.saveNum = editMessage[0]
    this.hadEdit = editMessage[1]
    this.inputChange = editMessage[2]
    debugger
  },
  handleClick(tab, event) {
    // console.log(tab, event);
  }
},
created() {},
mounted() {
  
},
// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
	//stauts1_didntSave = 1的时候为获取数据，不是改变数据，大于1才是。
  if (this.saveNum > 1 && this.hadEdit === true && this.inputChange === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前修改未保存，是否保存？', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行,这里写你想要跳转之前的事件
      this.$refs.category.saveSettingClass()
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      //接下来的跳转动作
      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;
    }
  }
}
</style>
</style>

完整代码（子组件）

<!--
 * @Author: your name
 * @Date: 2021-06-10 20:49:16
 * @LastEditTime: 2021-06-11 11:34:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \client-platform-terminal\src\views\electronic-records\component\category-setting.vue
-->
<!--  -->
<template lang="pug">
  .category-setting(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" @click="categoryPreview") 预览
      el-button(v-if="isEdit" type="primary" size="mini" @click="categoryAdd") 新增
    .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="isEdit && scope.row.id !== '00'" @input="hasInputChange")
              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="isEdit && scope.row.id !== '00'" @input="hasInputChange")
              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="isEdit && scope.row.id !== '00'" @input="hasInputChange")
              span(v-html="scope.row.no" v-else)
          el-table-column(label="操作" align="center" width="180")
            template(slot-scope="scope")
              span(@click="categoryDelete(scope.$index)" v-if="scope.row.id !== '00'" style="color: #0081f3") 删除
    xt-dialog(
      title="档案分类目录树"
      ref="previewTreeRef"
      class="previewTreeRef"
      top="24vh"
      width="25%"
      append-to-body
      :showfooter="false"
    )
      el-tree(:data="previewTreeData" :props="defaultProps" :default-expand-all="true")
    //- 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: 'category-setting',
components: {},
data() {
  return {
    previewTreeData: [],
    defaultProps: {
      children: 'children',
      label: 'label'
    },
    saveNum: 0,
    tableData1: [],
    isEdit: false,
    hadEdit: false,
    inputChange: false,
    activeName: '1category',
    tabList:[{
      label: "分类设置",
      name: "1category"
    },{
      label: "案卷记录字段设置",
      name: "2records"
    },{
      label: "文件记录字段设置",
      name: "3file"
    },{
      label: "查询设置",
      name: "4search"
    }]
  }
},
computed: {},
watch: {
  tableData1 (val) {
    if(val){
      this.hasInputChange()
    }
    deep: true
    console.log('我是检测到变化')
  },
},
methods: {
  //保存编辑
  async saveSettingClass() {
    this.$api.saveSettingClass({classes: this.tableData1})
    //用户离开页面检测，用户点击确定，保存编辑，判断条件初始化
    this.saveNum = 0
    this.hadEdit = false
    this.inputChange = false
    //获取数据
    this.getSettingClassList()
  },
  hasInputChange(aa) {
    //编辑未保存状态下弹框 路由改变判断的条件在这里
    if(aa) {
      this.saveNum++
      this.hadEdit = true
      this.inputChange = true
      let editMessage = [this.saveNum,this.hadEdit,this.inputChange]
      //向父组件传值
      this.$emit('getEditMessageFromCategory', editMessage)
    }
  },
  handleClick(tab, event) {
    // console.log(tab, event);
  },
},
created() {
},
mounted() {
  
},
}
</script>
<style lang="scss" scoped>
.category-setting {
  .button-box {
    padding-left: 20px;
  }
  .content {
    .table-box {
      /deep/ .el-table {
        height: 560px;
        overflow: auto;
      }
    }
  }
}
</style>