vue2.0頁面前進刷新回退不刷新的實現

花了整整一週時間，嘗試過不少種方法，終於找到了最佳的解決方案（對我來講最佳），爲了祭奠逝去的一週，也爲了釋放激動的情緒，如今不得不寫篇博客了。

直接上重點：

第一步：

//在APP.vue裏面寫上keepalive，能夠實現緩存（keep-alive是什麼？查看官方文檔）

 

 

第二步：

//在router的index.js裏面給須要緩存的頁面加上meta參數

 

第三步：

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

 

第四步：

//由於個人想法是從首頁（index.vue）進入列表頁時刷新數據，從列表頁點擊進入詳情頁，再返回列表頁時不刷新，

因此從首頁進入列表頁時，將列表頁的isBack設置爲false，

而後在列表頁的activated生命週期鉤子中判斷isBack，爲false則執行加載函數，爲true則使用緩存。

//index.vue中：

//list.vue中

至此，終於完美實現了效果，其實還有可優化的地方，加入須要keepalive的頁面不少的話，每個頁面都寫相同的beforeRouteLeave和activated就沒有必要了，

可是具體怎麼優化，等須要用到了再說吧。