關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案
問(wèn)題
發(fā)現(xiàn)了一個(gè)問(wèn)題，多級(jí)嵌套的路由緩存頁(yè)面沒(méi)有生效。網(wǎng)上其實(shí)有一些是把路由拍平，然后再去處理菜單，但是我覺(jué)得還不如從根源上去解決這個(gè)問(wèn)題。順帶了解一下keep-alive的工作原理。 實(shí)際就是根據(jù)組件的名稱(chēng)，如果即將渲染的組件名稱(chēng)命中存在緩存數(shù)組，那么直接取緩存里的組件進(jìn)行渲染。同時(shí)，這個(gè)命中緩存是帶有父子組件關(guān)聯(lián)關(guān)系的
以下會(huì)根據(jù)本圖做講解
定位問(wèn)題
keep-alive實(shí)際就是根據(jù)組件的名稱(chēng)，如果即將渲染的組件名稱(chēng)命中存在緩存數(shù)組，那么直接取緩存里的組件進(jìn)行渲染。也就是我們一個(gè)頁(yè)面的渲染，是按一個(gè)一個(gè)組件來(lái)的，組件命中緩存則取緩存，如果沒(méi)有緩存，則下面的子組件不再進(jìn)行緩存命中的判斷，從新渲染。
我們?cè)诼酚缮隙x了name屬性，以name和組件名稱(chēng)相對(duì)應(yīng)的形式去判斷路由跳轉(zhuǎn)時(shí)當(dāng)前組件是否銷(xiāo)毀。實(shí)際上keep-alive就是根據(jù)組件名稱(chēng)去判斷是否?；畹?，所以之所以多級(jí)路由沒(méi)有生效的原因就顯而易見(jiàn)了，多級(jí)路由我們有一個(gè)中間組件去作為路由容器，然而這個(gè)路由容器組件我們沒(méi)有定義組件名，所以導(dǎo)致了沒(méi)有辦法緩存最后一層的組件。
也就是我們的layout還有wrapper/index.vue組件中沒(méi)有定義名稱(chēng)，所以哪怕給keep-alive的include傳遞了Summary組件的名稱(chēng)，但是由于父級(jí)并沒(méi)有找到，所以沒(méi)辦法在下次渲染時(shí)命中該組件的緩存。
解決方案
由問(wèn)題定位可知，我們?nèi)ヒ患?jí)一級(jí)添加組件名稱(chēng)不就ok了嗎。 但是，就有一個(gè)問(wèn)題出現(xiàn)了，layout還有wrapper/index.vue是多個(gè)組件復(fù)用的啊，這樣不就會(huì)導(dǎo)致我所有的頁(yè)面的中間組件都會(huì)被緩存起來(lái)了嗎。
所以，我們動(dòng)態(tài)組件名不就o了嗎，所以我們就直接根據(jù)hash去取對(duì)應(yīng)的路由值去賦值給組件名稱(chēng)賦值
額外的問(wèn)題及題解
我們存在tab-view組件，可以關(guān)閉緩存頁(yè)面，但是我們現(xiàn)在一個(gè)二級(jí)頁(yè)面緩存的是兩個(gè)組件，一個(gè)三級(jí)頁(yè)面緩存的是三個(gè)組件，而且相同父級(jí)的還共同依賴(lài)父級(jí)組件，也就是實(shí)際緩存summary和fabInventory兩個(gè)頁(yè)面時(shí)，是緩存了Inventory，InventoryManagement，summary和fabInventory四個(gè)組件，所以清除掉summary時(shí)，你還要考慮是否他有兄弟路由被緩存，如果存在則父級(jí)別緩存，這是個(gè)往上遞歸的判斷
到此這篇關(guān)于關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案的文章就介紹到這了,更多相關(guān)keep-alive路由多級(jí)嵌套不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue實(shí)現(xiàn)前端拖拽div位置交換的方法詳解
這篇文章主要介紹了如何使用Vue技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的備忘錄應(yīng)用,包括添加條目和拖拽條目?jī)蓚€(gè)功能,文章還詳細(xì)解釋了如何使用Vue的draggable屬性和JavaScript獲取同級(jí)元素節(jié)點(diǎn)的方法,需要的朋友可以參考下2025-01-01
vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
mpvue是一個(gè)使用Vue.js開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了Vue生命周期區(qū)別詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
vue中的vendor.js文件過(guò)大問(wèn)題及解決
這篇文章主要介紹了vue中的vendor.js文件過(guò)大問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue2.0 keep-alive的最佳實(shí)踐，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問(wèn)題的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲(chǔ)狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)進(jìn)度條變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09