轉發至：https://www.cnblogs.com/nokelong/p/8124513.html
項目開發中在用戶由分類頁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頁面。
至此終於解決了這個問題。
網友提供了其他的解決方案可以參考下，
也可以參考github上關於keep-alive緩存相關的問。