用過 vue-element-admin 的同學一定很清楚，路由的配置直接關系側邊欄導航菜單的展示，也得益于這種設計思路，幾乎大部分后臺框架都采用這個方案，當然也包括了我寫的 Fantastic-admin 這個中后臺框架。
但這個方案有個明顯的問題，就是為了實現多級側邊欄導航菜單，則需要將路由配置成多級嵌套的形式，一旦超過兩級，達到三級甚至更多級，就需要增加一個空布局頁面（Empty.vue）用來給 component 使用，僅僅是為了生成層級菜單。此時就出現了一個問題，因為 keep-alive 是在 Layout 上處理的，所以超過兩級以上的路由都會變得難以處理，也沒有一個相對完美的解決方案。
在思考并解決這個問題之前，我們先來看下頁面大致結構：
|
1
2
3
4
5
6
7
8
9
|
+------------------------------+| Layout || +------------------------+ || | Empty | || | +------------------+ | || | | Page | | || | +------------------+ | || +------------------------+ |+------------------------------+ |
首先 keep-alive 是在 Layout 上進行處理，如果不緩存 Empty ，則 Empty 下面的頁面將無法被緩存，如果緩存 Empty ，又會導致 Empty 里面的所有頁面都被緩存，無法按需清除，相信接觸過的同學肯定感同身受其中的大坑。
解決思路
其實有一個相對清晰簡單的解決思路，既然緩存二級路由是沒問題，而超過二級的中間層級頁面也是沒太大意義的，那為什么不將路由直接處理成二級，這樣頁面顯示也就是二級的結構。
|
1
2
3
4
5
6
7
8
9
|
+------------------------------+ +------------------------------+| Layout | | Layout.vue || +------------------------+ | | +------------------------+ || | Empty | | +----------> | | Page | || | +------------------+ | | | | | || | | Page | | | | | | || | +------------------+ | | | | | || +------------------------+ | | +------------------------+ |+------------------------------+ +------------------------------+ |
這里需要注意，路由配置還是保持多級嵌套的形式，而這個配置并非最終注冊使用的路由，僅僅是提供側邊欄導航菜單使用，同時再生成一份用于動態注冊路由的數據，圖例如果沒看明白的話，可以看下面兩組數據。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
// 原始數據（用于側邊欄導航菜單）{ 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 進行顯示了，所以在處理路由數據的同時，也需要處理面包屑導航的信息。大致最終會處理成這樣：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
{ 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 里查看，核心代碼在這，點擊查看。
到此這篇關于解決基于 keep-alive 的后臺多級路由緩存問題的文章就介紹到這了,更多相關 keep-alive多級路由緩存 內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/hooray/archive/2020/12/22/14174402.html
