項目開發中在用戶由分類頁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頁面。

至此終於解決了這個問題。