{
  path: "/spa",
  component: Layout,
  children: [
    {
      path: "spaTmpl/imDeclarationForm",
      component: () => import("@/views/imDeclarationForm.vue"),
      name: "imDeclarationForm",
      meta: {
        title: "xx",
        keepAlive: true
      }
    }
  ]
}

import { createRouter, createWebHashHistory } from "vue-router";
import { ElMessageBox } from 'element-plus';
import { ref } from 'vue';

// 編輯狀態(tài)存儲(chǔ)
const editStatusMap = ref({
  '/spa/spaTmpl/imDeclarationForm': false
});

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...], // 原有路由配置
  scrollBehavior: () => ({ left: 0, top: 0 })
});

// 添加全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  const currentPath = '/spa/spaTmpl/imDeclarationForm';
  
  // 當(dāng)從目標(biāo)頁(yè)面離開(kāi)且有未保存內(nèi)容時(shí)觸發(fā)提示
  if (from.path === currentPath && editStatusMap.value[currentPath]) {
    ElMessageBox.confirm(
      '您有未保存的修改，確定要離開(kāi)嗎？',
      '提示',
      {
        confirmButtonText: '確定離開(kāi)',
        cancelButtonText: '繼續(xù)編輯',
        type: 'warning'
      }
    ).then(() => {
      next(); // 用戶(hù)確認(rèn)離開(kāi)
    }).catch(() => {
      next(false); // 用戶(hù)取消離開(kāi)
    });
  } else {
    next(); // 正常導(dǎo)航
  }
});

export function setupRouter(app) {
  app.use(router);
}

export { editStatusMap };
export default router;

<template>
  <el-form :model="formData">
    <!-- 表單字段 -->
  </el-form>
</template>

<script setup>
import { ref, watch } from 'vue';
import { editStatusMap } from '@/router';

const formData = ref({
  // 表單初始數(shù)據(jù)
});

// 監(jiān)聽(tīng)表單數(shù)據(jù)變化
watch(formData, () => {
  editStatusMap.value['/spa/spaTmpl/imDeclarationForm'] = true;
}, { deep: true });

// 保存方法
const handleSave = () => {
  // 調(diào)用保存API
  editStatusMap.value['/spa/spaTmpl/imDeclarationForm'] = false;
};
</script>