vue keep-alive列表頁(yè)緩存 詳情頁(yè)返回上一頁(yè)不刷新,定位到之前位置
需求:
商品列表頁(yè)面瀏覽,進(jìn)入商品詳情,點(diǎn)擊返回仍然是之前瀏覽的位置
實(shí)現(xiàn):
使用 vue 的 keep-alive 的 include 屬性給組件做動(dòng)態(tài)緩存,從詳情頁(yè)返回不變,從其他頁(yè)面進(jìn)入列表頁(yè)則刷新
加需要緩存的列表頁(yè)面定義一個(gè)數(shù)據(jù)集在 vuex
state:{
pageListArr:[]
}
列表頁(yè)的 name 為 proList ,詳情頁(yè)的 name 為 proDetail ,只有 PageListArr 包含的字段才會(huì)被緩存,如 pageListArr.push("proList")
<keep-alive :include="pageListArr"> <router-view></router-view> </keep-alive>
思路:
在頁(yè)面初始化前,獲取來(lái)源頁(yè)面的 name 和要去加載頁(yè)面的 name .
在這里使用全局導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
// 來(lái)源頁(yè)面name -> from.name
// 去往頁(yè)面name -> to.name
// 如果要跳轉(zhuǎn)的頁(yè)面為商品列表,且不是從商品詳情返回或者跳轉(zhuǎn)
if(to.name===`proList`&&from.name!==`proDetail`){
pageListArr.push(`proList`)
}
// 來(lái)源為商品頁(yè)面返回列表頁(yè)面
if(to.name===`proList`&&from.name===`proDetail`){
console.log(`不做處理`)
}
})
當(dāng)多個(gè)不同的列表頁(yè)面需要設(shè)置緩存時(shí),如分類(lèi)商品列表,活動(dòng)商品列表
需要先判斷 pageListArr 是否已緩存某些頁(yè)面,只有從商情詳情返回已緩存的列表頁(yè)才是無(wú)刷新,未緩存的列表頁(yè)面仍然需要新緩存
總結(jié)
以上所述是小編給大家介紹的vue keep-alive列表頁(yè)緩存 詳情頁(yè)返回上一頁(yè)不刷新,定位到之前位置，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue解決子組件樣式覆蓋問(wèn)題scoped deep
文章主要介紹了在Vue項(xiàng)目中處理全局樣式和局部樣式的方法,包括使用scoped屬性和深度選擇器（/deep/）來(lái)覆蓋子組件的樣式,作者建議所有組件必須使用scoped,以避免樣式?jīng)_突,對(duì)于父組件覆蓋子組件的樣式,作者推薦給子組件指定自定義類(lèi)名2025-01-01
vue3升級(jí)常見(jiàn)問(wèn)題詳細(xì)匯總
隨著vue3?的發(fā)布和越來(lái)越多項(xiàng)目的使用,之前使用?vue2?的項(xiàng)目也不能拉下,vue2?升級(jí)?vue3?迫在眉睫,下面這篇文章主要給大家介紹了關(guān)于vue3升級(jí)常見(jiàn)問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue.js作為現(xiàn)代前端開(kāi)發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴(kuò)展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)timepicker效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)
這篇文章主要介紹了簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式
這篇文章主要介紹了vue項(xiàng)目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+element?upload上傳帶參數(shù)的實(shí)例
這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06