成功vue页面未保存退出提示

<template>
  <div class="app-container" style="padding-top: 0px">
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :inline="true"
      style="width: 100%"
    >
      <div style="float: left">
        <el-form-item>
          <el-select
            v-model="SearchType"
            placeholder="请选择"
            style="magin: 0px 5px; width: 160px"
          >
            <el-option
              v-for="item in SearchTypeOptions"
              :key="item.SearchTypeValue"
              :label="item.SearchTypeValue"
              :value="item.SearchTypeValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label prop="SearchContent">
          <el-input
            v-model="SearchContent"
            placeholder="请输入内容"
            style="padding: 0px 5px; width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="GetWarehousingList"
            >查询</el-button
          >
        </el-form-item>
      </div>

<div style="float: right">
        <el-form-item label="实验用途" prop="ExperimentalUse">
          <el-input v-model="form.ExperimentalUse" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddWarehouseOut()"
            >确认出库</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="
        ListScientificResearchSamplesStorage.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      :header-cell-style="CommonJs.rowClass"
      :row-key="CommonJs.GetRowKey"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        prop="ID"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="SampleType"
        label="样本类型"
        align="center"
      ></el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 20, 100]"
      :page-size="pageSize"
      :total="ListScientificResearchSamplesStorage.length"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      style="text-align: center; margin-top: 1%"
    ></el-pagination>
  </div>
</template>
脚本：
export default {
  filters: {},
  data() {
    return {
 ModifyCount:0,
}}
updated() {
    this.ModifyCount = this.ModifyCount + 1;
  },
  beforeRouteLeave(to, from, next) {
    if (this.ModifyCount > 0) {
      // 这里需要elementui的支持，如果使用其他界面组件自行替换即可
      this
        .$confirm("正在离开本页面，本页面内所有未保存数据都会丢失", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          // 正常跳转
          next();
        })
        .catch(() => {
          // 如果取消跳转地址栏会变化，这时保持地址栏不变
          window.history.go(1);
        });
    } else {
      next();
    }
  },