vue中的keep-alive組件實現緩存並動態清除功能實現

綜述:一個需要細細品味和分析的問題,當前有三個頁面a=>b=>c,需要從c到b時,使用緩存數據,因此引入了keep-alive組件,但是第二次從a到c時,依然還是緩存數據,就需要清除緩存數據了;由此引發一個問題,實現一個路由組件,頁面跳轉的時候,前進動態獲取數據,後退使用緩存,這個功能該怎樣實現?

1.方案一

使用sessionStorage等繪畫層存儲方法保存數據

2.方案二

將數據保存到vuex中去

3.方案三

在vue-router中去修改以下兩個屬性

  • include:匹配的 路由/組件 會被緩存
  • exclude:匹配的 路由/組件 不會被緩存

includeexclude支持三種方式來有條件的緩存路由:採用逗號分隔的字符串形式,正則形式,數組形式。

正則和數組形式,必須採用v-bind形式來使用。

4.功能實踐應用

在實際的項目開發中,從一個組件跳轉到另一個組件,1->2->3當從3返回到2是,就應該使用vue中的keep-alive進行緩存,這樣在返回的時候纔不會出現重新渲染的問題,且如果是依賴頁面1中的數據來渲染的話,此時會出現問題;

 

 

---未完待續

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章