页面缓存bug修改

src/constants/enumerate.js

@@ -136,3 +136,13 @@ export const MENU_ROUTER_DICT = {
   topicTaskManage: "TopicTaskManage",
   todoExam: "TodoExam"
 };
+
+export const keepAliveRoutesPairs = [
+  ["wait-task", ["wait-task-detail"]],
+  ["done-task", ["done-task-detail"]],
+  ["exam-manage", ["exam-room-detail", "exam-edit"]],
+  ["exam-task-audit", ["exam-task-audit-edit"]],
+  ["user-manage", ["user-edit"]],
+  ["topic-task-manage", ["topic-task-edit"]],
+  ["todo-exam", ["exam-edit"]]
+];

src/constants/navs.js

@@ -29,7 +29,7 @@ const navs = [
         children: [
           {
             title: "考场详情",
-            router: "ExamRomeDetail"
+            router: "ExamRoomDetail"
           },
           {
             title: "考试任务详情",
@@ -37,7 +37,7 @@ const navs = [
           },
           {
             title: "考生详情",
-            router: "ExamRomeStudentDetail"
+            router: "ExamRoomStudentDetail"
           },
           {
             title: "新增考试",

src/main.js

@@ -7,6 +7,7 @@ import store from "./store";
 import globalVuePlugins from "./plugins/globalVuePlugins";
 import GLOBAL from "./config";
 import { jsonBigNumberToString } from "./plugins/utils";
+import "./plugins/keepAlive";
 // import { getAuthorisation } from "./plugins/crypto";
 
 // https://github.com/RobinCK/vue-ls

src/modules/exam-center/router.js

@@ -7,8 +7,8 @@ import DoneTaskDetail from "./views/DoneTaskDetail.vue";
 import ExamManage from "./views/ExamManage.vue";
 import ExamModify from "./views/ExamModify.vue";
 import ExamTaskDetail from "./views/ExamTaskDetail.vue";
-import ExamRomeDetail from "./views/ExamRomeDetail.vue";
-import ExamRomeStudentDetail from "./views/ExamRomeStudentDetail.vue";
+import ExamRoomDetail from "./views/ExamRoomDetail.vue";
+import ExamRoomStudentDetail from "./views/ExamRoomStudentDetail.vue";
 import CardManage from "./views/CardManage.vue";
 import ExamTaskAudit from "./views/ExamTaskAudit.vue";
 import ExamTaskAuditEdit from "./views/ExamTaskAuditEdit.vue";
@@ -66,18 +66,18 @@ export default [
   },
   {
     path: "/exam-center/exam-room-detail/:examId?",
-    name: "ExamRomeDetail",
-    component: ExamRomeDetail,
+    name: "ExamRoomDetail",
+    component: ExamRoomDetail,
     meta: {
-      relate: "ExamManage/ExamRomeDetail"
+      relate: "ExamManage/ExamRoomDetail"
     }
   },
   {
     path: "/exam-center/exam-room-student-detail/:examRoomInfo?",
-    name: "ExamRomeStudentDetail",
-    component: ExamRomeStudentDetail,
+    name: "ExamRoomStudentDetail",
+    component: ExamRoomStudentDetail,
     meta: {
-      relate: "ExamManage/ExamRomeDetail/ExamRomeStudentDetail"
+      relate: "ExamManage/ExamRoomDetail/ExamRoomStudentDetail"
     }
   },
   {

src/modules/exam-center/views/ExamManage.vue

@@ -320,7 +320,7 @@ export default {
     },
     toDetail(row) {
       this.$router.push({
-        name: "ExamRomeDetail",
+        name: "ExamRoomDetail",
         params: {
           examId: row.id
         }

src/modules/exam-center/views/ExamRomeDetail.vue → src/modules/exam-center/views/ExamRoomDetail.vue

@@ -169,7 +169,7 @@ export default {
     },
     toDetail(row) {
       this.$router.push({
-        name: "ExamRomeStudentDetail",
+        name: "ExamRoomStudentDetail",
         params: {
           examRoomInfo: `${row.examId}-${row.sceneNumberId}-${row.examSite}-${row.examRoomId}`
         }
@@ -182,6 +182,26 @@ export default {
     } else {
       this.isInit = true;
     }
+  },
+  beforeRouteEnter(to, from, next) {
+    if (from.name === "ExamRoomStudentDetail") {
+      next(vm => {
+        vm.$store.commit("setRestoreKeepAliveRoutes");
+        vm.toPage(vm.current);
+      });
+    } else {
+      next();
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    console.log(to.name);
+    if (to.name === "ExamRoomStudentDetail") {
+      this.$store.commit("setRestoreKeepAliveRoutes");
+      this.$store.commit("addKeepAliveRouteItem", "exam-room-detail");
+    } else {
+      this.$store.commit("removeKeepAliveRouteItem", "exam-room-detail");
+    }
+    next();
   }
 };
 </script>

src/modules/exam-center/views/ExamRomeStudentDetail.vue → src/modules/exam-center/views/ExamRoomStudentDetail.vue

@@ -234,6 +234,12 @@ export default {
       this.rooms = curSite.examRooms;
       this.filter.examRoomId = "";
     }
+  },
+  beforeRouteLeave(to, from, next) {
+    if (to.name === "ExamRoomDetail") {
+      this.$store.commit("setRestoreKeepAliveRoutes");
+    }
+    next();
   }
 };
 </script>

src/plugins/keepAlive.js

@@ -0,0 +1,37 @@
+import { keepAliveRoutesPairs } from "@/constants/enumerate";
+import { humpToLowLine } from "@/plugins/utils";
+import Vue from "vue";
+
+Vue.mixin({
+  beforeRouteEnter(to, from, next) {
+    const toName = humpToLowLine(to.name);
+    next(vm => {
+      const tos = keepAliveRoutesPairs.map(v => v[0]);
+      if (
+        tos.includes(toName) &&
+        vm.$store.state.keepAliveRoutes.length === 0
+      ) {
+        vm.$store.commit("setRestoreKeepAliveRoutes");
+      }
+    });
+  },
+  beforeRouteLeave(to, from, next) {
+    const fromName = humpToLowLine(from.name);
+    const toName = humpToLowLine(to.name);
+    const froms = keepAliveRoutesPairs.map(v => v[0]);
+    if (
+      (froms.includes(fromName) &&
+        keepAliveRoutesPairs[froms.indexOf(fromName)][1].includes(toName)) ||
+      (froms.includes(toName) &&
+        keepAliveRoutesPairs[froms.indexOf(toName)][1].includes(fromName))
+    ) {
+      // 减少无谓的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/plugins/utils.js

@@ -239,6 +239,13 @@ function jsonBigNumberToString(text) {
     });
 }
 
+function humpToLowLine(a) {
+  return a
+    .replace(/([A-Z])/g, "-$1")
+    .toLowerCase()
+    .slice(1);
+}
+
 export {
   objTypeOf,
   deepCopy,
@@ -253,5 +260,6 @@ export {
   removeHtmlTag,
   calcSum,
   isEmptyObject,
-  jsonBigNumberToString
+  jsonBigNumberToString,
+  humpToLowLine
 };

src/store.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { keepAliveRoutesPairs } from "@/constants/enumerate";
 
 Vue.use(Vuex);
 
@@ -9,11 +10,25 @@ import examCenter from "./modules/exam-center/store";
 
 export default new Vuex.Store({
   state: {
-    user: {}
+    user: {},
+    keepAliveRoutes: keepAliveRoutesPairs.map(v => v[0])
   },
   mutations: {
     setUser(state, user) {
       state.user = user;
+    },
+    setEmptyKeepAliveRoutes(state) {
+      state.keepAliveRoutes = [];
+    },
+    setRestoreKeepAliveRoutes(state) {
+      state.keepAliveRoutes = keepAliveRoutesPairs.map(v => v[0]);
+    },
+    addKeepAliveRouteItem(state, name) {
+      state.keepAliveRoutes.push(name);
+    },
+    removeKeepAliveRouteItem(state, name) {
+      const pos = state.keepAliveRoutes.indexOf(name);
+      if (pos !== -1) state.keepAliveRoutes.splice(pos, 1);
     }
   },
   actions: {},

src/views/Home.vue

@@ -97,7 +97,7 @@
         <!-- home-view: page detail -->
         <div class="home-view">
           <!-- <router-view /> -->
-          <keep-alive :include="cacheRouters">
+          <keep-alive :include="keepAliveRoutes">
             <router-view />
           </keep-alive>
         </div>
@@ -191,17 +191,7 @@ export default {
       IS_SUPER_ADMIN: this.$ls
         .get("user", { roleCode: "" })
         .roleCode.includes("SUPER_ADMIN"),
-      menuDailogIsShow: false,
-      cacheRouters: [
-        "wait-task",
-        "done-task",
-        "exam-manage",
-        "exam-room-detail",
-        "exam-task-audit",
-        "user-manage",
-        "topic-task-manage",
-        "todo-exam"
-      ]
+      menuDailogIsShow: false
     };
   },
   watch: {
@@ -213,6 +203,9 @@ export default {
     ...mapState("examCenter", ["waitTaskCount"]),
     curNav() {
       return this.navs[this.curMainIndex];
+    },
+    keepAliveRoutes() {
+      return this.$store.state.keepAliveRoutes;
     }
   },
   created() {