vue中使用keepAlive組件緩存遇到的坑


項目開發中在用戶由分類頁category進入detail需保存用戶狀態,查閱了Vue官網后,發現vue2.0提供了一個keep-alive組件。
上一篇講了keep-alive的基本用法,現在說說遇到的坑。
先說項目中的配置
 
在App.vue中的設置
 
在router中增加配置meta
 

上面這個設置后發現問題了,從category進入detail頁后,狀態被保存了,返回的時候保存了用戶狀態,達到了預期效果
但問題在於但從category返回到index后,再由index進入category時依然顯示是緩存中的頁面,此刻頁面沒有刷新。
返回index后的組件顯示如下:

 

分析從index再次進入category時,直接讀取了緩存的里的頁面。
頭大。。。。。。。我的目標只是緩存從category進入detail頁面,其他的時候不緩存。
 
解決方案
在category中啟用beforeRouteLeave鈎子函數
 beforeRouteLeave中只有從category進入detail時才進行緩存,其他頁面都講category的keepalive設置成false,並銷毀此category組件;
 

然而,發現新的問題。。。。。。
第一次操作index--> category ---> detail的時候是理想效果,但當第二次操作返回index后,進行index --> category --> detail --> category時,發現緩存的對象又不對了,從detail返回category時,保存是的第一次進入detail的分類情況。
此刻category的組件顯示如下

 

無奈。。。。。對比了第一次和第二次進入頁面情況
 
根據vue-router提供的守衛可在路由中啟用afterEach路由守衛,在afterEach中進行判斷是否第一次進入,非第一次進入頁面情況強制刷新一次category頁面。
 
至此終於解決了這個問題。
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM