解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問(wèn)題
用過(guò) vue-element-admin 的同學(xué)一定很清楚，路由的配置直接關(guān)系側(cè)邊欄導(dǎo)航菜單的展示，也得益于這種設(shè)計(jì)思路，幾乎大部分后臺(tái)框架都采用這個(gè)方案，當(dāng)然也包括了我寫(xiě)的 Fantastic-admin 這個(gè)中后臺(tái)框架。
但這個(gè)方案有個(gè)明顯的問(wèn)題，就是為了實(shí)現(xiàn)多級(jí)側(cè)邊欄導(dǎo)航菜單，則需要將路由配置成多級(jí)嵌套的形式，一旦超過(guò)兩級(jí)，達(dá)到三級(jí)甚至更多級(jí)，就需要增加一個(gè)空布局頁(yè)面（Empty.vue）用來(lái)給 component 使用，僅僅是為了生成層級(jí)菜單。此時(shí)就出現(xiàn)了一個(gè)問(wèn)題，因?yàn)?keep-alive 是在 Layout 上處理的，所以超過(guò)兩級(jí)以上的路由都會(huì)變得難以處理，也沒(méi)有一個(gè)相對(duì)完美的解決方案。
在思考并解決這個(gè)問(wèn)題之前，我們先來(lái)看下頁(yè)面大致結(jié)構(gòu)：
+------------------------------+ | Layout | | +------------------------+ | | | Empty | | | | +------------------+ | | | | | Page | | | | | +------------------+ | | | +------------------------+ | +------------------------------+
首先 keep-alive 是在 Layout 上進(jìn)行處理，如果不緩存 Empty ，則 Empty 下面的頁(yè)面將無(wú)法被緩存，如果緩存 Empty ，又會(huì)導(dǎo)致 Empty 里面的所有頁(yè)面都被緩存，無(wú)法按需清除，相信接觸過(guò)的同學(xué)肯定感同身受其中的大坑。
解決思路
其實(shí)有一個(gè)相對(duì)清晰簡(jiǎn)單的解決思路，既然緩存二級(jí)路由是沒(méi)問(wèn)題，而超過(guò)二級(jí)的中間層級(jí)頁(yè)面也是沒(méi)太大意義的，那為什么不將路由直接處理成二級(jí)，這樣頁(yè)面顯示也就是二級(jí)的結(jié)構(gòu)。
+------------------------------+ +------------------------------+ | Layout | | Layout.vue | | +------------------------+ | | +------------------------+ | | | Empty | | +----------> | | Page | | | | +------------------+ | | | | | | | | | Page | | | | | | | | | +------------------+ | | | | | | | +------------------------+ | | +------------------------+ | +------------------------------+ +------------------------------+
這里需要注意，路由配置還是保持多級(jí)嵌套的形式，而這個(gè)配置并非最終注冊(cè)使用的路由，僅僅是提供側(cè)邊欄導(dǎo)航菜單使用，同時(shí)再生成一份用于動(dòng)態(tài)注冊(cè)路由的數(shù)據(jù)，圖例如果沒(méi)看明白的話，可以看下面兩組數(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ù)（用于動(dòng)態(tài)注冊(cè)路由）
{
path: '/users',
meta: {
title: '用戶管理'
},
children: [
{
path: 'clients/list',
meta: {
title: '客戶列表'
}
},
{
path: 'clients/detail',
meta: {
title: '客戶詳情'
}
}
]
}
通過(guò)一個(gè)遞歸函數(shù)就可以處理好路由的數(shù)據(jù)，但這還不夠，因?yàn)檫€需要處理面包屑導(dǎo)航。
原有的面包屑導(dǎo)航是通過(guò) $route.matched 可以獲取到嵌套路由每一層級(jí)的信息，而當(dāng)路由被處理成兩級(jí)后，也就無(wú)法通過(guò) $route.matched 進(jìn)行顯示了，所以在處理路由數(shù)據(jù)的同時(shí)，也需要處理面包屑導(dǎo)航的信息。大致最終會(huì)處理成這樣：
{
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: '客戶詳情' }
]
}
}
]
}
這樣一來(lái)，通過(guò) $route.meta.breadcrumb 就可以獲取任意某個(gè)路由的完整面包屑導(dǎo)航信息了。最終效果如下：
通過(guò)圖片可以看到，這種方案也還是有一定的限制，就是路由被處理成二級(jí)后，多級(jí)嵌套關(guān)系不存在了，也就是不能在 Empty 里寫(xiě)任何代碼，因?yàn)槎紩?huì)被忽略掉，只保留頂級(jí)和最深層的底級(jí)兩個(gè)路由。
當(dāng)然通過(guò)實(shí)際情況考慮，這種限制并沒(méi)有大問(wèn)題，因?yàn)樵诤笈_(tái)系統(tǒng)里，本身模塊相對(duì)獨(dú)立，即便側(cè)邊欄導(dǎo)航菜單是嵌套層級(jí)關(guān)系的，在右側(cè)內(nèi)容展示區(qū)域，幾乎都是獨(dú)立模塊展示，無(wú)需嵌套。
實(shí)例代碼
本文主要是討論實(shí)現(xiàn)思路，相關(guān)代碼可在 Fantastic-admin 里查看，核心代碼在這，點(diǎn)擊查看。
到此這篇關(guān)于解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問(wèn)題的文章就介紹到這了,更多相關(guān) keep-alive多級(jí)路由緩存 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)簡(jiǎn)單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要介紹了vue 巧用過(guò)渡效果(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09
通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開(kāi)發(fā)想省時(shí)間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue側(cè)邊欄動(dòng)態(tài)生成下級(jí)菜單的方法
今天小編就為大家分享一篇vue側(cè)邊欄動(dòng)態(tài)生成下級(jí)菜單的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在 Vue3 項(xiàng)目中，有時(shí)候會(huì)出現(xiàn)圖片視頻加載緩慢、首屏加載白屏的問(wèn)題，所以本文小編就給大家詳細(xì)介紹一下如何解決圖片視頻加載緩慢/首屏加載白屏的問(wèn)題,需要的朋友可以參考下2023-07-07
Vue.js的復(fù)用組件開(kāi)發(fā)流程完整記錄
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開(kāi)發(fā)流程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04