使用場景

譬如a頁面跳轉b頁面，我們需要將a頁面快取，當從b頁面回到a頁面時，頁面不重繪，而a頁面跳轉c、d等等頁面時，不進行快取，

技術堆疊及實作原理

本教程基于Vue框架，配合Vue-Router和Vuex進行實作，我們知道，Vue-Router可以使用標簽進行頁面快取，還可以配置include屬性指定快取的頁面，原理步驟如下：

1. 首先配置需要快取的頁面路由名稱及目標路由路徑，例如：routerName: ["/pageB"]；
2. 在頁面加載前，通過路由組件鉤子beforeRouteEnter讀取配置，判斷當前頁面是否需要快取，即組態檔中是否有配置項的routerName等于當前頁面的Name，如果需要快取，則通過Vuex保存起來；
3. 當頁面離開時，通過路由組件鉤子beforeRouteLeave讀取配置，判斷將要到達的頁面是否需要將當前頁面快取，即陣列值是否包含將要到達的路由路徑，如果包含，則將當面頁面快取，并通過Vuex在快取頁面串列中新增當前頁面；否則將當前頁面置為不快取，并在快取頁面串列中將當前頁面移除，

具體實作步驟

這里以用戶管理為例：

1. 新建三個頁面list.vue, edit.vue, detail.vue

   list.vue

   <template>
     <div>
       <div class="app-container">
         <p>這是用戶串列頁</p>
         <p>模擬快取資料：</p>
         <el-input v-model="username" placeholder="請輸入用戶名" />
       </div>
     </div>
   </template>
   <script>
   export default {
     name: "UserList",
     data() {
       return {
         username: ""
       };
     }
   };
   </script>
   

   edit.vue

   <template>
     <div>
       <div class="app-container">
         <p>這是用戶編輯頁</p>
         <el-input v-model="username" placeholder="請輸入用戶名" />
       </div>
     </div>
   </template>
   <script>
   export default {
     name: "UserEdit",
     data() {
       return {
         username: ""
       };
     }
   };
   </script>
   

   detail.vue

   <template>
     <div>
       <div class="app-container">
         <p>這是用戶詳情頁</p>
         <span>test detail</span>
       </div>
     </div>
   </template>
   <script>
   export default {
     name: "UserDetail"
   };
   </script>
   
   

2. 配置這三個頁面的路由：

   {
       path: '/test',
       component: Layout,
       meta: { title: 'test', icon: 'documentation', affix: true },
       children: [
         {
           path: 'user',
           component: SecondLayout,
           meta: { title: '用戶管理', icon: 'documentation', affix: true },
           children: [
             {
               path: 'list',
               name: 'UserList',
               component: () => import('@/views/test/user/list'),
               meta: { title: '用戶串列', icon: 'documentation', affix: true }
             },
             {
               path: 'edit',
               name: 'UserEdit',
               component: () => import('@/views/test/user/edit'),
               meta: { title: '用戶編輯', icon: 'documentation', affix: true }
             },
             {
               path: 'detail',
               name: 'UserDetail',
               component: () => import('@/views/test/user/detail'),
               meta: { title: '用戶編輯', icon: 'documentation', affix: true }
             }
           ]
         }
       ]
   }
   

3. 配置快取檔案，這里以用戶串列頁跳轉用戶編輯頁為例，在utils檔案夾中新建檔案conf.js，增加如下代碼：

   // 頁面快取配置
   export const PageCacheConfig = {
    // 當前需要快取的路由名稱：['跳轉的路由路徑']
    UserList: ['/test/user/edit']
   }
   

   即表示：用戶串列頁UserList跳轉到用戶編輯頁（路徑為‘/test/user/edit’)時需要將用戶串列頁快取，

4. 利用Vuex在store檔案夾中新增頁面快取模塊pageCache.js，代碼如下：

   const state = {
     pageCacheList: []
   };
   const getters = {
     getPageCacheList: state => {
       return state.pageCacheList;
     }
   };
   const mutations = {
     ADD(state, pageName) {
       state.pageCacheList.push(pageName);
     },
     DEL(state, pageName) {
       state.pageCacheList.forEach((page, index) => {
         if (page === pageName) {
           state.pageCacheList.splice(index);
         }
       });
     }
   };
   const actions = {
     add({ commit }, pageName) {
       commit("ADD", pageName);
     },
     delete({ commit }, pageName) {
       commit("DEL", pageName);
     }
   };
   
   export default {
     namespaced: true,
     state,
     getters,
     mutations,
     actions
   };
   
   

5. 在你的router-view中配置keep-alive和include：

   <template>
     <div>
       <keep-alive :include="pageCache">
         <router-view v-if="$route.meta.keepAlive" />
       </keep-alive>
       <router-view v-if="!$route.meta.keepAlive" />
     </div>
   </template>
   
   <script>
   import { mapGetters } from "vuex";
   export default {
     name: "SecondLayout",
     computed: {
       ...mapGetters({
         pageCacheList: "pageCache/getPageCacheList"
       }),
       pageCache() {
         return this.pageCacheList.join(",");
       }
     }
   };
   

特別說明：因為include中包含的其實是頁面匯出名稱而不是路由名稱，而本教程配置的又是路由 名稱，因此需要將頁面名稱與路由名稱相匹配

6. 新建一個mixin檔案pageCacheMix.js：

   import { PageCacheConfig } from "@/utils/conf";
   import { mapActions, mapGetters } from "vuex";
   
   export default {
     name: "pageCacheMix",
     computed: {
       ...mapGetters({
         pageCacheList: "pageCache/getPageCacheList"
       })
     },
   
     methods: {
       ...mapActions({
         addPageCache: "pageCache/add",
         deletePageCache: "pageCache/delete"
       })
     },
     beforeRouteEnter(to, from, next) {
       next(vm => {
         if (to.name && PageCacheConfig[to.name]) {
           if (vm.pageCacheList.includes(to.name)) {
             // no
           } else {
             to.meta.keepAlive = true;
             vm.addPageCache(to.name);
           }
         }
       });
     },
     beforeRouteLeave(to, from, next) {
       // 當前路由配置了路由名以及快取配置中配置了該路由才進行相關操作
       if (from.name && PageCacheConfig[from.name]) {
         if (PageCacheConfig[from.name].includes(to.path)) {
           // 配置中包含前往路徑，則快取，否則不快取
           from.meta.keepAlive = true;
           if (this.pageCacheList.includes(from.name)) {
             // no
           } else {
             this.addPageCache(from.name);
           }
         } else {
           from.meta.keepAlive = false;
           this.deletePageCache(from.name);
         }
       }
       next();
     }
   };
   

7. 在userList頁面中引入pageCache混入檔案：

   <template>
     <div>
       <div class="app-container">
         <p>這是用戶串列頁</p>
         <p>模擬快取資料：</p>
         <el-input v-model="username" placeholder="請輸入用戶名" />
       </div>
     </div>
   </template>
   <script>
   import pageCacheMix from "@/mixins/pageCacheMix";
   export default {
     name: "UserList",
     mixins: [pageCacheMix],
     data() {
       return {
         username: ""
       };
     }
   };
   </script>
   

8. finish