一勞永逸，解決基於 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 裏查看，核心代碼在這，點擊查看。