一勞永逸，解決基于 keep-alive 的后臺多級路由快取問題

用過 vue-element-admin 的同學一定很清楚，路由的配置直接關系側邊欄導航選單的展示，也得益于這種設計思路，幾乎大部分后臺框架都采用這個方案，當然也包括了我寫的 Fantastic-admin 這個中后臺框架，

但這個方案有個明顯的問題，就是為了實作多級側邊欄導航選單，則需要將路由配置成多級嵌套的形式，一旦超過兩級，達到三級甚至更多級，就需要增加一個空布局頁面（Empty.vue）用來給 component 使用，僅僅是為了生成層級選單，此時就出現了一個問題，因為 keep-alive 是在 Layout 上處理的，所以超過兩級以上的路由都會變得難以處理，也沒有一個相對完美的解決方案，

在思考并解決這個問題之前，我們先來看下頁面大致結構：

+------------------------------+
| Layout                       |
|  +------------------------+  |
|  | Empty                  |  |
|  |  +------------------+  |  |
|  |  | Page             |  |  |
|  |  +------------------+  |  |
|  +------------------------+  |
+------------------------------+

首先 keep-alive 是在 Layout 上進行處理，如果不快取 Empty ，則 Empty 下面的頁面將無法被快取，如果快取 Empty ，又會導致 Empty 里面的所有頁面都被快取，無法按需清除，相信接觸過的同學肯定感同身受其中的大坑，

解決思路

其實有一個相對清晰簡單的解決思路，既然快取二級路由是沒問題，而超過二級的中間層級頁面也是沒太大意義的，那為什么不將路由直接處理成二級，這樣頁面顯示也就是二級的結構，

+------------------------------+                +------------------------------+
| Layout                       |                | Layout.vue                   |
|  +------------------------+  |                |  +------------------------+  |
|  | Empty                  |  |  +---------->  |  | Page                   |  |
|  |  +------------------+  |  |                |  |                        |  |
|  |  | Page             |  |  |                |  |                        |  |
|  |  +------------------+  |  |                |  |                        |  |
|  +------------------------+  |                |  +------------------------+  |
+------------------------------+                +------------------------------+

這里需要注意，路由配置還是保持多級嵌套的形式，而這個配置并非最終注冊使用的路由，僅僅是提供側邊欄導航選單使用，同時再生成一份用于動態注冊路由的資料，圖例如果沒看明白的話，可以看下面兩組資料，

// 原始資料（用于側邊欄導航選單）
{
    path: '/users',
    meta: {
        title: '用戶管理'
    },
    children: [
        {
            path: 'clients',
            meta: {
                title: '客戶管理'
            },
            children: [
                {
                    path: 'list',
                    meta: {
                        title: '客戶串列'
                    }
                },
                {
                    path: 'detail',
                    meta: {
                        title: '客戶詳情'
                    }
                }
            ]
        }
    ]
}

// 處理后資料（用于動態注冊路由）
{
    path: '/users',
    meta: {
        title: '用戶管理'
    },
    children: [
        {
            path: 'clients/list',
            meta: {
                title: '客戶串列'
            }
        },
        {
            path: 'clients/detail',
            meta: {
                title: '客戶詳情'
            }
        }
    ]
}

通過一個遞回函式就可以處理好路由的資料，但這還不夠，因為還需要處理面包屑導航，

原有的面包屑導航是通過 $route.matched 可以獲取到嵌套路由每一層級的資訊，而當路由被處理成兩級后，也就無法通過 $route.matched 進行顯示了，所以在處理路由資料的同時，也需要處理面包屑導航的資訊，大致最侄訓處理成這樣：

{
    path: '/users',
    meta: {
        title: '用戶管理'
    },
    children: [
        {
            path: 'clients/list',
            meta: {
                title: '客戶串列',
                breadCrumb: [
                    { path: '/users', title: '用戶管理' },
                    { path: 'clients', title: '客戶管理' },
                    { path: 'list', title: '客戶串列' }
                ]
            }
        },
        {
            path: 'clients/detail',
            meta: {
                title: '客戶詳情',
                breadCrumb: [
                    { path: '/users', title: '用戶管理' },
                    { path: 'clients', title: '客戶管理' },
                    { path: 'detail', title: '客戶詳情' }
                ]
            }
        }
    ]
}

這樣一來，通過 $route.meta.breadcrumb 就可以獲取任意某個路由的完整面包屑導航資訊了，最終效果如下：

通過圖片可以看到，這種方案也還是有一定的限制，就是路由被處理成二級后，多級嵌套關系不存在了，也就是不能在 Empty 里寫任何代碼，因為都會被忽略掉，只保留頂級和最深層的底級兩個路由，

當然通過實際情況考慮，這種限制并沒有大問題，因為在后臺系統里，本身模塊相對獨立，即便側邊欄導航選單是嵌套層級關系的，在右側內容展示區域，幾乎都是獨立模塊展示，無需嵌套，

實體代碼

本文主要是討論實作思路，相關代碼可在 Fantastic-admin 里查看，核心代碼在這，點擊查看，

標籤：其他

上一篇：TS 變數宣告

下一篇：JavaScript基礎ES5/ES6常用陣列方法匯總