問題

發(fā)現(xiàn)了一個(gè)問題，多級(jí)嵌套的路由緩存頁面沒有生效。網(wǎng)上其實(shí)有一些是把路由拍平，然后再去處理菜單，但是我覺得還不如從根源上去解決這個(gè)問題。順帶了解一下keep-alive的工作原理。 實(shí)際就是根據(jù)組件的名稱，如果即將渲染的組件名稱命中存在緩存數(shù)組，那么直接取緩存里的組件進(jìn)行渲染。同時(shí)，這個(gè)命中緩存是帶有父子組件關(guān)聯(lián)關(guān)系的

以下會(huì)根據(jù)本圖做講解

定位問題

keep-alive實(shí)際就是根據(jù)組件的名稱，如果即將渲染的組件名稱命中存在緩存數(shù)組，那么直接取緩存里的組件進(jìn)行渲染。也就是我們一個(gè)頁面的渲染，是按一個(gè)一個(gè)組件來的，組件命中緩存則取緩存，如果沒有緩存，則下面的子組件不再進(jìn)行緩存命中的判斷，從新渲染。

我們?cè)诼酚缮隙x了name屬性，以name和組件名稱相對(duì)應(yīng)的形式去判斷路由跳轉(zhuǎn)時(shí)當(dāng)前組件是否銷毀。實(shí)際上keep-alive就是根據(jù)組件名稱去判斷是否?；畹?，所以之所以多級(jí)路由沒有生效的原因就顯而易見了，多級(jí)路由我們有一個(gè)中間組件去作為路由容器，然而這個(gè)路由容器組件我們沒有定義組件名，所以導(dǎo)致了沒有辦法緩存最后一層的組件。

也就是我們的layout還有wrapper/index.vue組件中沒有定義名稱，所以哪怕給keep-alive的include傳遞了Summary組件的名稱，但是由于父級(jí)并沒有找到，所以沒辦法在下次渲染時(shí)命中該組件的緩存。

解決方案

由問題定位可知，我們?nèi)ヒ患?jí)一級(jí)添加組件名稱不就ok了嗎。 但是，就有一個(gè)問題出現(xiàn)了，layout還有wrapper/index.vue是多個(gè)組件復(fù)用的啊，這樣不就會(huì)導(dǎo)致我所有的頁面的中間組件都會(huì)被緩存起來了嗎。

所以，我們動(dòng)態(tài)組件名不就o了嗎，所以我們就直接根據(jù)hash去取對(duì)應(yīng)的路由值去賦值給組件名稱賦值

額外的問題及題解

我們存在tab-view組件，可以關(guān)閉緩存頁面，但是我們現(xiàn)在一個(gè)二級(jí)頁面緩存的是兩個(gè)組件，一個(gè)三級(jí)頁面緩存的是三個(gè)組件，而且相同父級(jí)的還共同依賴父級(jí)組件，也就是實(shí)際緩存summary和fabInventory兩個(gè)頁面時(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論