vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
更新時間：2019年11月26日 10:00:25 作者：大師兄
這篇文章主要介紹了vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置，本文通過實例代碼效果圖展示給大家介紹的非常詳細,需要的朋友可以參考下
需求:
商品列表頁面瀏覽,進入商品詳情,點擊返回仍然是之前瀏覽的位置
實現(xiàn):
使用 vue 的 keep-alive 的 include 屬性給組件做動態(tài)緩存,從詳情頁返回不變,從其他頁面進入列表頁則刷新
加需要緩存的列表頁面定義一個數(shù)據(jù)集在 vuex
state:{
pageListArr:[]
}
列表頁的 name 為 proList ,詳情頁的 name 為 proDetail ,只有 PageListArr 包含的字段才會被緩存,如 pageListArr.push("proList")
<keep-alive :include="pageListArr"> <router-view></router-view> </keep-alive>
思路:
在頁面初始化前,獲取來源頁面的 name 和要去加載頁面的 name .
在這里使用全局導航守衛(wèi)
router.beforeEach((to, from, next) => {
// 來源頁面name -> from.name
// 去往頁面name -> to.name
// 如果要跳轉(zhuǎn)的頁面為商品列表,且不是從商品詳情返回或者跳轉(zhuǎn)
if(to.name===`proList`&&from.name!==`proDetail`){
pageListArr.push(`proList`)
}
// 來源為商品頁面返回列表頁面
if(to.name===`proList`&&from.name===`proDetail`){
console.log(`不做處理`)
}
})
當多個不同的列表頁面需要設(shè)置緩存時,如分類商品列表,活動商品列表
需要先判斷 pageListArr 是否已緩存某些頁面,只有從商情詳情返回已緩存的列表頁才是無刷新,未緩存的列表頁面仍然需要新緩存
總結(jié)
以上所述是小編給大家介紹的vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue開發(fā)中的動態(tài)組件與緩存組件及異步組件的使用教程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
今天給大家分享的是，如何在最短的時候內(nèi)實現(xiàn)右鍵菜單。高效實現(xiàn)需求，避免重復造輪子。感興趣的可以了解一下2021-10-10
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個自定義指令講解及實例用法，有興趣的朋友們可以跟著學習下。2021-12-12
這篇文章主要為大家詳細介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue項目中js文件使用vue的this實例說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結(jié)合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
Vite?vue3多頁面入口打包以及部署踩坑實戰(zhàn)
因為我們公司的項目是多頁面應用,不同于傳統(tǒng)單頁面應用,一個包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應用
這篇文章主要介紹了3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應用,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了如何vue中添加音頻和視頻的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學習價值,感興趣的小伙伴可以了解下2023-08-08