vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

發(fā)布時間：2020-09-29 23:41:20 來源：腳本之家閱讀：156 作者：LiveLikeDog 欄目：web開發(fā)

花了整整一周時間，嘗試過很多種方法，終于找到了最佳的解決方案（對我來說最佳），為了祭奠逝去的一周，也為了釋放激動的情緒，現(xiàn)在不得不寫篇博客了。

直接上重點：

第一步：

//在APP.vue里面寫上keepalive，可以實現(xiàn)緩存（keep-alive是什么？查看官方文檔）

vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

第二步：

//在router的index.js里面給需要緩存的頁面加上meta參數(shù)

vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

第三步：

//在APP.vue里面寫，當頁面路由發(fā)生變化時，將相應頁面的滾動位置記錄下來，在頁面updated時讀取并賦值

vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

第四步：

//因為我的想法是從首頁（index.vue）進入列表頁時刷新數(shù)據(jù)，從列表頁點擊進入詳情頁，再返回列表頁時不刷新，

所以從首頁進入列表頁時，將列表頁的isBack設(shè)置為false，

然后在列表頁的activated生命周期鉤子中判斷isBack，為false則執(zhí)行加載函數(shù)，為true則使用緩存。

//index.vue中：

vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

//list.vue中

vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

至此，終于完美實現(xiàn)了效果，其實還有可優(yōu)化的地方，加入需要keepalive的頁面很多的話，每一個頁面都寫相同的beforeRouteLeave和activated就沒有必要了，

但是具體怎么優(yōu)化，等需要用到了再說吧。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

猜你喜歡