項目開發(fā)中在用戶由分類頁category進入detail需保存用戶狀態(tài)，查閱了Vue官網(wǎng)后，發(fā)現(xiàn)vue2.0提供了一個keep-alive組件。 上一篇講了keep-alive的基本用法，現(xiàn)在說說遇到的坑。 先說項目中的配置 在App.vue中的設置

在router中增加配置meta 上面這個設置后發(fā)現(xiàn)問題了，從category進入detail頁后，狀態(tài)被保存了，返回的時候保存了用戶狀態(tài)，達到了預期效果 但問題在于但從category返回到index后，再由index進入category時依然顯示是緩存中的頁面，此刻頁面沒有刷新。 返回index后的組件顯示如下： 分析從index再次進入category時，直接讀取了緩存的里的頁面。 頭大。。。。。。。我的目標只是緩存從category進入detail頁面，其他的時候不緩存。 解決方案 在category中啟用beforeRouteLeave鉤子函數(shù) beforeRouteLeave中只有從category進入detail時才進行緩存，其他頁面都講category的keepalive設置成false，并銷毀此category組件; 然而，發(fā)現(xiàn)新的問題。。。。。。 第一次操作index--> category ---> detail的時候是理想效果，但當?shù)诙尾僮鞣祷豬ndex后，進行index --> category --> detail --> category時，發(fā)現(xiàn)緩存的對象又不對了，從detail返回category時，保存是的第一次進入detail的分類情況。 此刻category的組件顯示如下 無奈。。。。。對比了第一次和第二次進入頁面情況 根據(jù)vue-router提供的守衛(wèi)可在路由中啟用afterEach路由守衛(wèi)，在afterEach中進行判斷是否第一次進入，非第一次進入頁面情況強制刷新一次category頁面。? 至此終于解決了這個問題。 網(wǎng)友提供了其他的解決方案可以參考下， https://www.jianshu.com/p/cd1baf5b03b0 也可以參考github上關于keep-alive緩存相關的問。 https://github.com/vuejs/vue-router/issues/811#issuecomment-353875880

轉(zhuǎn)載于:https://www.cnblogs.com/nokelong/p/8124513.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的vue中使用keepAlive组件缓存遇到的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。