用過 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 裡檢視，核心程式碼在這，點選檢視。