Vue3使用KeepAlive不生效的解決方法
問題描述
使用arco-design-pro的vue3后臺(tái)框架, 切換路由時(shí), 組件包裹的keepAlive不生效, 切換tab后組件狀態(tài)會(huì)刷新, 并重新獲取接口, 導(dǎo)致頁面切換時(shí)閃爍
嘗試了網(wǎng)上說的很多方法, 例如添加name、路由層級(jí)等等依舊無法解決, 之后開始剝洋蔥, 刪減代碼, 做最小復(fù)現(xiàn)后, 得出解決方案
解決方法
請(qǐng)注意: 解決方案可能并不全面, 可以參考網(wǎng)上許多基礎(chǔ)的帖子, 我總結(jié)了在實(shí)際項(xiàng)目中出現(xiàn)并且容易忽略的位置，可能帶有一些主觀性，但希望能提供一些靈感。
router路由中需要添加name, 和組件中需要保持一致即可
如果需要keepAlive的頁面是孫路由, 子路由組件的router-view也應(yīng)該包裹keepAlive.
如上圖子路由的組件studentAccount下有孫組件studentList, 并需要緩存studentList, 則應(yīng)該在studentAccount的route-view也加入keepAlive
- vue3中會(huì)根據(jù)組件名自動(dòng)生成name, 但有時(shí)我們的組件或者文件名并不是name, 導(dǎo)致自動(dòng)生成的和路由的name對(duì)應(yīng)不上, 這時(shí)需要手動(dòng)命名組件,
根據(jù)官網(wǎng)的提示, 組件幫我自動(dòng)生成了name, 但我的文件夾名稱是student, 而不是studentAccount, 導(dǎo)致vue自動(dòng)生成的name和路由中的不匹配
查閱官網(wǎng)后發(fā)現(xiàn), 需要使用defineOptions進(jìn)行手動(dòng)命名, 值得注意的是, 要使用defineOptions, 而不是defineComponent
- arco的組件庫在頂層的layout中添加了cacheList, 導(dǎo)致keepAlive不生效
cacheList存儲(chǔ)在store中, 默認(rèn)值是空數(shù)組, 也就是所有頁面都不緩存, 我們需要將緩存的頁面路由名稱放到cacheTabList中
思路總結(jié)
keepAlive的不生效可能是多種多樣的, 但排查思路大同小異, 希望對(duì)正在被keepAlive折磨的友友有幫助~
以上就是Vue3使用KeepAlive不生效的解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue3 KeepAlive不生效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
利用vue組件實(shí)現(xiàn)圖片的拖拽和縮放功能
這篇文章主要給大家介紹了關(guān)于利用vue組件實(shí)現(xiàn)圖片的拖拽和縮放功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
React之input動(dòng)態(tài)取值和賦值方式
這篇文章主要介紹了React之input動(dòng)態(tài)取值和賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項(xiàng)目base64轉(zhuǎn)img方式
這篇文章主要介紹了vue項(xiàng)目base64轉(zhuǎn)img方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2左側(cè)菜單欄收縮展開功能實(shí)現(xiàn)
vue2左側(cè)菜單欄收縮展開目前是非常常見的,我們?cè)谌粘ｉ_發(fā)過程中經(jīng)常會(huì)碰到,這篇文章給大家介紹vue2左側(cè)菜單欄收縮展開功能,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue實(shí)現(xiàn)首頁banner自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)首頁banner自動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)例配置對(duì)象中el、template、render的用法
這篇文章主要介紹了vue實(shí)例配置對(duì)象中el、template、render的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在Vue中,組件之間的傳參是構(gòu)建動(dòng)態(tài)和交互性用戶界面的關(guān)鍵,Vue提供了多種方式來傳遞參數(shù),本文對(duì)這些方式進(jìn)行了詳細(xì)說明,并有相關(guān)的代碼供大家參考,需要的朋友可以參考下2025-05-05
vue項(xiàng)目中js文件使用vue的this實(shí)例說明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12