keepAlive fix bug

src/constant/constants.js

@@ -148,3 +148,11 @@ if (process.env.VUE_APP_SELF_DEFINE_DOMAIN === "true") {
 }
 if (!domain) domain = window.location.hostname.split(".")[0];
 export const ORG_CODE = domain;
+
+// [routeNameShouldKeepAlive, [whenReturedFromThisRoute]]
+export const keepAliveRoutesPairs = [
+  ["ExamManagement", ["ExamEdit"]],
+  ["InvigilationDetail", ["WarningDetail", "InvigilationWarningDetail"]],
+  ["WarningManage", ["WarningDetail", "InvigilationWarningDetail"]],
+  ["OnlinePatrol", ["PatrolExamDetail", "PatrolWarningDetail"]],
+];

src/features/examwork/ExamManagement/ExamManagement.vue

@@ -191,13 +191,6 @@ export default {
       next();
     }
   },
-  beforeRouteLeave(to, from, next) {
-    if (to.name !== "ExamEdit") {
-      // 仅仅在编辑考试时保持alive
-      this.$destroy();
-    }
-    next();
-  },
   methods: {
     async searchForm() {
       const res = await searchExams({

src/features/invigilation/InvigilationDetail/InvigilationDetail.vue

@@ -384,14 +384,5 @@ export default {
       });
     },
   },
-  beforeRouteLeave(to, from, next) {
-    if (
-      to.name !== "WarningDetail" &&
-      to.name !== "InvigilationWarningDetail"
-    ) {
-      this.$destroy();
-    }
-    next();
-  },
 };
 </script>

src/features/invigilation/OnlinePatrol/OnlinePatrol.vue

@@ -425,12 +425,6 @@ export default {
       });
     },
   },
-  beforeRouteLeave(to, from, next) {
-    if (to.name !== "PatrolExamDetail" && to.name !== "PatrolWarningDetail") {
-      this.$destroy();
-    }
-    next();
-  },
   beforeRouteEnter(to, from, next) {
     if (from.name === "PatrolExamDetail") {
       next((vm) => vm.$nextTick(() => vm.setDetailIds(vm.cacheDetailIds)));

src/features/invigilation/WarningManage/WarningManage.vue

@@ -365,15 +365,6 @@ export default {
       });
     },
   },
-  beforeRouteLeave(to, from, next) {
-    if (
-      to.name !== "WarningDetail" &&
-      to.name !== "InvigilationWarningDetail"
-    ) {
-      this.$destroy();
-    }
-    next();
-  },
   beforeRouteEnter(to, from, next) {
     if (from.name === "WarningDetail") {
       next((vm) => vm.$nextTick(() => vm.getList()));

src/main.js

@@ -10,6 +10,7 @@ import "./components/registerComponents";
 import "./plugins/customComponents";
 import "./filters";
 import "./mixins/logout";
+import "./mixins/keepAlive";
 import "./plugins/element.js";
 // 14KB JS & 0KB CSS: 7 svg icons
 import "./plugins/vueAwesome";

src/mixins/keepAlive.js

@@ -0,0 +1,34 @@
+import { keepAliveRoutesPairs } from "@/constant/constants";
+import Vue from "vue";
+
+Vue.mixin({
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      const tos = keepAliveRoutesPairs.map((v) => v[0]);
+      if (
+        tos.includes(to.name) &&
+        vm.$store.state.keepAliveRoutes.length === 0
+      ) {
+        vm.$store.commit("setRestoreKeepAliveRoutes");
+      }
+    });
+  },
+  beforeRouteLeave(to, from, next) {
+    console.log(from.name, to.name);
+    const froms = keepAliveRoutesPairs.map((v) => v[0]);
+    if (
+      (froms.includes(from.name) &&
+        keepAliveRoutesPairs[froms.indexOf(from.name)][1].includes(to.name)) ||
+      (froms.includes(to.name) &&
+        keepAliveRoutesPairs[froms.indexOf(to.name)][1].includes(from.name))
+    ) {
+      // 减少无谓的commit
+      if (this.$store.state.keepAliveRoutes.length === 0)
+        this.$store.commit("setRestoreKeepAliveRoutes");
+    } else {
+      if (this.$store.state.keepAliveRoutes.length > 0)
+        this.$store.commit("setEmptyKeepAliveRoutes");
+    }
+    next();
+  },
+});

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import createPersistedState from "vuex-persistedstate";
 import user from "./modules/user";
 import invigilation from "./modules/invigilation";
+import { keepAliveRoutesPairs } from "@/constant/constants";
 
 Vue.use(Vuex);
 
@@ -15,6 +16,7 @@ export default new Vuex.Store({
   state: {
     isFullScreen: false,
     schoolLogo: "",
+    keepAliveRoutes: keepAliveRoutesPairs.map((v) => v[0]),
   },
   mutations: {
     setIsFullScreen(state, isFullScreen) {
@@ -23,6 +25,12 @@ export default new Vuex.Store({
     setSchoolLogo(state, schoolLogo) {
       state.schoolLogo = schoolLogo;
     },
+    setEmptyKeepAliveRoutes(state) {
+      state.keepAliveRoutes = [];
+    },
+    setRestoreKeepAliveRoutes(state) {
+      state.keepAliveRoutes = keepAliveRoutesPairs.map((v) => v[0]);
+    },
   },
   actions: {},
 });

src/views/Layout/components/AppMain.vue

@@ -2,7 +2,7 @@
   <section class="app-main">
     <transition name="fade" mode="out-in">
       <!-- <router-view :key="key"></router-view> -->
-      <keep-alive :include="cacheRouters">
+      <keep-alive :include="keepAliveRoutes">
         <router-view />
       </keep-alive>
     </transition>
@@ -12,15 +12,10 @@
 <script>
 export default {
   name: "AppMain",
-  data() {
-    return {
-      cacheRouters: [
-        "ExamManagement",
-        "InvigilationDetail",
-        "WarningManage",
-        "OnlinePatrol",
-      ],
-    };
+  computed: {
+    keepAliveRoutes() {
+      return this.$store.state.keepAliveRoutes;
+    },
   },
 };
 </script>