解決基于 keep-alive 的后臺多級路由緩存問題

更新時間：2020年12月23日 09:45:28 作者：一個不太知名的程序員

這篇文章主要介紹了解決基于 keep-alive 的后臺多級路由緩存問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

用過 vue-element-admin 的同學(xué)一定很清楚，路由的配置直接關(guān)系側(cè)邊欄導(dǎo)航菜單的展示，也得益于這種設(shè)計思路，幾乎大部分后臺框架都采用這個方案，當(dāng)然也包括了我寫的 Fantastic-admin 這個中后臺框架。

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

在思考并解決這個問題之前，我們先來看下頁面大致結(jié)構(gòu)：

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

首先 keep-alive 是在 Layout 上進(jìn)行處理，如果不緩存 Empty ，則 Empty 下面的頁面將無法被緩存，如果緩存 Empty ，又會導(dǎo)致 Empty 里面的所有頁面都被緩存，無法按需清除，相信接觸過的同學(xué)肯定感同身受其中的大坑。

解決思路

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

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

這里需要注意，路由配置還是保持多級嵌套的形式，而這個配置并非最終注冊使用的路由，僅僅是提供側(cè)邊欄導(dǎo)航菜單使用，同時再生成一份用于動態(tài)注冊路由的數(shù)據(jù)，圖例如果沒看明白的話，可以看下面兩組數(shù)據(jù)。

// 原始數(shù)據(jù)（用于側(cè)邊欄導(dǎo)航菜單）
{
  path: '/users',
  meta: {
    title: '用戶管理'
  },
  children: [
    {
      path: 'clients',
      meta: {
        title: '客戶管理'
      },
      children: [
        {
          path: 'list',
          meta: {
            title: '客戶列表'
          }
        },
        {
          path: 'detail',
          meta: {
            title: '客戶詳情'
          }
        }
      ]
    }
  ]
}

// 處理后數(shù)據(jù)（用于動態(tài)注冊路由）
{
  path: '/users',
  meta: {
    title: '用戶管理'
  },
  children: [
    {
      path: 'clients/list',
      meta: {
        title: '客戶列表'
      }
    },
    {
      path: 'clients/detail',
      meta: {
        title: '客戶詳情'
      }
    }
  ]
}

通過一個遞歸函數(shù)就可以處理好路由的數(shù)據(jù)，但這還不夠，因為還需要處理面包屑導(dǎo)航。

原有的面包屑導(dǎo)航是通過 $route.matched 可以獲取到嵌套路由每一層級的信息，而當(dāng)路由被處理成兩級后，也就無法通過 $route.matched 進(jìn)行顯示了，所以在處理路由數(shù)據(jù)的同時，也需要處理面包屑導(dǎo)航的信息。大致最終會處理成這樣：

{
  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 就可以獲取任意某個路由的完整面包屑導(dǎo)航信息了。最終效果如下：