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