vue2.0頁面前進(jìn)刷新回退不刷新的實現(xiàn)方法
花了整整一周時間，嘗試過很多種方法，終于找到了最佳的解決方案（對我來說最佳），為了祭奠逝去的一周，也為了釋放激動的情緒，現(xiàn)在不得不寫篇博客了。
直接上重點：
第一步：
//在APP.vue里面寫上keepalive，可以實現(xiàn)緩存（keep-alive是什么？查看官方文檔）
第二步：
//在router的index.js里面給需要緩存的頁面加上meta參數(shù)
第三步：
//在APP.vue里面寫，當(dāng)頁面路由發(fā)生變化時，將相應(yīng)頁面的滾動位置記錄下來，在頁面updated時讀取并賦值
第四步：
//因為我的想法是從首頁（index.vue）進(jìn)入列表頁時刷新數(shù)據(jù)，從列表頁點擊進(jìn)入詳情頁，再返回列表頁時不刷新，
所以從首頁進(jìn)入列表頁時，將列表頁的isBack設(shè)置為false，
然后在列表頁的activated生命周期鉤子中判斷isBack，為false則執(zhí)行加載函數(shù)，為true則使用緩存。
//index.vue中：
//list.vue中
至此，終于完美實現(xiàn)了效果，其實還有可優(yōu)化的地方，加入需要keepalive的頁面很多的話，每一個頁面都寫相同的beforeRouteLeave和activated就沒有必要了，
但是具體怎么優(yōu)化，等需要用到了再說吧。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于vue.js過渡css類名的理解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-04-04
vue復(fù)制內(nèi)容到剪切板代碼實現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue復(fù)制內(nèi)容到剪切板代碼實現(xiàn)的相關(guān)資料,在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見的操作之一,需要的朋友可以參考下2023-08-08
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本文是小編給大家收藏整理的關(guān)于vue項目前端知識點，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Vue+Openlayer批量設(shè)置閃爍點的實現(xiàn)代碼(基于postrender機(jī)制)
本篇文章給大家介紹基于postrender機(jī)制使用Vue+Openlayer批量設(shè)置閃爍點的實現(xiàn)代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了vue.js計算屬性computed用法,結(jié)合實例形式分析了vue.js使用computed方式進(jìn)行屬性計算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
vue中el-date-picker選擇日期的限制的項目實踐
ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下2023-10-10