vue2.0頁面前進刷新回退不刷新的實現方法
更新時間：2018年07月31日 11:46:29 作者：LiveLikeDog
這篇文章主要介紹了vue2.0頁面前進刷新回退不刷新的實現方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
花了整整一周時間，嘗試過很多種方法，終于找到了最佳的解決方案（對我來說最佳），為了祭奠逝去的一周，也為了釋放激動的情緒，現在不得不寫篇博客了。
直接上重點：
第一步：
//在APP.vue里面寫上keepalive，可以實現緩存（keep-alive是什么？查看官方文檔）
第二步：
//在router的index.js里面給需要緩存的頁面加上meta參數
第三步：
//在APP.vue里面寫，當頁面路由發(fā)生變化時，將相應頁面的滾動位置記錄下來，在頁面updated時讀取并賦值
第四步：
//因為我的想法是從首頁（index.vue）進入列表頁時刷新數據，從列表頁點擊進入詳情頁，再返回列表頁時不刷新，
所以從首頁進入列表頁時，將列表頁的isBack設置為false，
然后在列表頁的activated生命周期鉤子中判斷isBack，為false則執(zhí)行加載函數，為true則使用緩存。
//index.vue中：
//list.vue中
至此，終于完美實現了效果，其實還有可優(yōu)化的地方，加入需要keepalive的頁面很多的話，每一個頁面都寫相同的beforeRouteLeave和activated就沒有必要了，
但是具體怎么優(yōu)化，等需要用到了再說吧。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3如何使用ref獲取元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的過濾器及其時間格式化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
本文主要介紹Vue.js中監(jiān)聽器和計算屬性的相關知識點，包括對普通屬性的監(jiān)聽、對對象的監(jiān)聽、對數組的監(jiān)聽，以及計算屬性的Set方法，計算屬性與監(jiān)聽器的區(qū)別等等2021-05-05
這篇文章主要為大家詳細介紹了Vue.js標簽頁組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一2019-10-10
vue translate peoject實現在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實現在線翻譯功能，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue2打包部署后可動態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開發(fā)前后端分離項目時,前端打包部署后可動態(tài)修改后端接口地址的解決方法,文中通過圖文結合的方式介紹的非常詳細,需要的朋友可以參考下2024-07-07
在看這篇文章的幾點要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
這篇文章主要介紹了2分鐘實現一個Vue實時直播系統(tǒng)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue3+elementui-plus實現一個接口上傳多個文件功能
這篇文章主要介紹了vue3+elementui-plus實現一個接口上傳多個文件,先使用element-plus寫好上傳組件，然后假設有個提交按鈕，點擊上傳文件請求接口，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
之前只是淺顯的使用插件進行vue開發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關于Vue3兄弟組件傳值之mitt的超詳細講解,需要的朋友可以參考下2022-06-06