feat: 路由缓存

src/constants/enumerate.js

@@ -53,3 +53,9 @@ export const ASSIGN_CALC_STATUS = {
   RUNNING: "进行中",
   FINISH: "已完成",
 };
+
+// 注意：组件命名按照驼峰形式，其他方式命名会导致缓存失败
+// [routeNameShouldKeepAlive, [whenReturedFromThisRoute]]
+export const keepAliveRoutesPairs = [
+  ["AssignmentCalculate", ["AssignmentCalculateDetail"]],
+];

src/main.js

@@ -4,7 +4,7 @@ import router from "./router";
 import store from "./store";
 import globalVuePlugins from "./plugins/globalVuePlugins";
 import GLOBAL from "./config";
-// import "./plugins/keepAlive";
+import "./plugins/keepAlive";
 import "./plugins/filters";
 
 // https://github.com/RobinCK/vue-ls

src/modules/base/views/AssignmentCalculate.vue

@@ -119,7 +119,7 @@ import {
 import { downloadByApi } from "@/plugins/download";
 
 export default {
-  name: "assignment-calculate",
+  name: "AssignmentCalculate",
   data() {
     return {
       filter: {
@@ -147,6 +147,13 @@ export default {
     this.isNotAssignUser = user.roleList.some((item) => item !== "ASSIGN");
     await this.$refs.SemesterSelect.search();
   },
+  beforeRouteEnter(to, from, next) {
+    if (from.name === "AssignmentCalculateDetail") {
+      next((vm) => vm.$nextTick(() => vm.getList()));
+    } else {
+      next();
+    }
+  },
   methods: {
     async getList() {
       const datas = {
@@ -227,6 +234,7 @@ export default {
           courseCode: "",
           collegeId: "",
           openCollege: "",
+          courseName: "",
         },
         row ? { ...row, collegeId: this.filter.collegeId } : this.filter
       );

src/modules/base/views/AssignmentCalculateDetail.vue

@@ -78,7 +78,7 @@ import AssignConfig from "../components/assignment/AssignConfig.vue";
 import AssignResult from "../components/assignment/AssignResult.vue";
 
 export default {
-  name: "assignment-calculate-detail",
+  name: "AssignmentCalculateDetail",
   components: {
     AssignConfig,
     AssignResult,

src/plugins/keepAlive.js

@@ -1,14 +1,13 @@
 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]);
+      const mainRoutes = keepAliveRoutesPairs.map((v) => v[0]);
       if (
-        tos.includes(toName) &&
+        // 当进入 A 时，将 A 缓存
+        mainRoutes.includes(to.name) &&
         vm.$store.state.keepAliveRoutes.length === 0
       ) {
         vm.$store.commit("setRestoreKeepAliveRoutes");
@@ -16,19 +15,24 @@ Vue.mixin({
     });
   },
   beforeRouteLeave(to, from, next) {
-    const fromName = humpToLowLine(from.name);
-    const toName = humpToLowLine(to.name);
-    const froms = keepAliveRoutesPairs.map((v) => v[0]);
+    const mainRoutes = 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))
+      // 当离开 A 到 [B, C] 时，确保 A 缓存了
+      (mainRoutes.includes(from.name) &&
+        keepAliveRoutesPairs[mainRoutes.indexOf(from.name)][1].includes(
+          to.name
+        )) ||
+      // 当 [B, C] 回到 A 时，确保 A 缓存了
+      (mainRoutes.includes(to.name) &&
+        keepAliveRoutesPairs[mainRoutes.indexOf(to.name)][1].includes(
+          from.name
+        ))
     ) {
       // 减少无谓的commit
       if (this.$store.state.keepAliveRoutes.length === 0)
         this.$store.commit("setRestoreKeepAliveRoutes");
     } else {
+      // 其他情况的 leave 都清空缓存。至于在下个页面是否缓存，交给 beforeRouteEnter 判断
       if (this.$store.state.keepAliveRoutes.length > 0)
         this.$store.commit("setEmptyKeepAliveRoutes");
     }

src/store.js

@@ -1,16 +1,24 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { keepAliveRoutesPairs } from "@/constants/enumerate";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
     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]);
+    },
   },
   actions: {},
   modules: {},

src/views/Home.vue

@@ -79,7 +79,9 @@
 
         <!-- home-view: page detail -->
         <div class="home-view">
-          <router-view />
+          <keep-alive :include="keepAliveRoutes">
+            <router-view />
+          </keep-alive>
         </div>
       </div>
     </div>
@@ -128,6 +130,11 @@ export default {
       IS_SUPER_ADMIN,
     };
   },
+  computed: {
+    keepAliveRoutes() {
+      return this.$store.state.keepAliveRoutes;
+    },
+  },
   watch: {
     $route(val) {
       if (val.name === "Home") return;