Vue3使用KeepAlive不生效的解決方法
問題描述
使用arco-design-pro的vue3后臺框架, 切換路由時, 組件包裹的keepAlive不生效, 切換tab后組件狀態(tài)會刷新, 并重新獲取接口, 導(dǎo)致頁面切換時閃爍
嘗試了網(wǎng)上說的很多方法, 例如添加name、路由層級等等依舊無法解決, 之后開始剝洋蔥, 刪減代碼, 做最小復(fù)現(xiàn)后, 得出解決方案
解決方法
請注意: 解決方案可能并不全面, 可以參考網(wǎng)上許多基礎(chǔ)的帖子, 我總結(jié)了在實際項目中出現(xiàn)并且容易忽略的位置，可能帶有一些主觀性，但希望能提供一些靈感。
router路由中需要添加name, 和組件中需要保持一致即可
如果需要keepAlive的頁面是孫路由, 子路由組件的router-view也應(yīng)該包裹keepAlive.
如上圖子路由的組件studentAccount下有孫組件studentList, 并需要緩存studentList, 則應(yīng)該在studentAccount的route-view也加入keepAlive
- vue3中會根據(jù)組件名自動生成name, 但有時我們的組件或者文件名并不是name, 導(dǎo)致自動生成的和路由的name對應(yīng)不上, 這時需要手動命名組件,
根據(jù)官網(wǎng)的提示, 組件幫我自動生成了name, 但我的文件夾名稱是student, 而不是studentAccount, 導(dǎo)致vue自動生成的name和路由中的不匹配
查閱官網(wǎng)后發(fā)現(xiàn), 需要使用defineOptions進(jìn)行手動命名, 值得注意的是, 要使用defineOptions, 而不是defineComponent
- arco的組件庫在頂層的layout中添加了cacheList, 導(dǎo)致keepAlive不生效
cacheList存儲在store中, 默認(rèn)值是空數(shù)組, 也就是所有頁面都不緩存, 我們需要將緩存的頁面路由名稱放到cacheTabList中
思路總結(jié)
keepAlive的不生效可能是多種多樣的, 但排查思路大同小異, 希望對正在被keepAlive折磨的友友有幫助~
以上就是Vue3使用KeepAlive不生效的解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue3 KeepAlive不生效的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
ant design vue嵌套表格及表格內(nèi)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了解決Vue2.0自帶瀏覽器里無法打開的原因（兼容處理），非常具有實用價值，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本文給大家介紹Vue 實現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-10-10
這篇文章主要給大家介紹了關(guān)于vue+element開發(fā)一個谷歌插件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
由于 Vue 會在初始化實例時進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進(jìn)行上述過程 ，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02
VUE3+TS遞歸組件實現(xiàn)TreeList設(shè)計實例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實現(xiàn)TreeList設(shè)計實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09