vue中keep-alive如何實現(xiàn)列表頁緩存

小編給大家分享一下vue中keep-alive如何實現(xiàn)列表頁緩存，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

需求:

商品列表頁面瀏覽,進入商品詳情,點擊返回仍然是之前瀏覽的位置

實現(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 .

在這里使用全局導(dǎo)航守衛(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(`不做處理`)
 }
})

當(dāng)多個不同的列表頁面需要設(shè)置緩存時,如分類商品列表,活動商品列表

需要先判斷 pageListArr 是否已緩存某些頁面,只有從商情詳情返回已緩存的列表頁才是無刷新,未緩存的列表頁面仍然需要新緩存

以上是“vue中keep-alive如何實現(xiàn)列表頁緩存”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！