vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前的位置

原文鏈接: https://dsx2016.com/?p=716

微信公衆號: 大師兄2016

需求:

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

 

實現:

使用vue的keep-alive的include屬性給組件做動態緩存,從詳情頁返回不變,從其他頁面進入列表頁則刷新

加需要緩存的列表頁面定義一個數據集在vuex

state:{
    pageListArr:[]
}

列表頁的name爲proList,詳情頁的name爲proDetail,只有PageListArr包含的字段纔會被緩存,如pageListArr.push("proList")

<keep-alive :include="pageListArr">
   <router-view></router-view>
</keep-alive>

思路:

在頁面初始化前,獲取來源頁面的name和要去加載頁面的name.

在這裏使用全局導航守衛

router.beforeEach((to, from, next) => {
  // 來源頁面name -> from.name
  // 去往頁面name -> to.name
  // 如果要跳轉的頁面爲商品列表,且不是從商品詳情返回或者跳轉
  if(to.name===`proList`&&from.name!==`proDetail`){
      pageListArr.push(`proList`)
  }
  // 來源爲商品頁面返回列表頁面
  if(to.name===`proList`&&from.name===`proDetail`){
      console.log(`不做處理`)
  }
})

當多個不同的列表頁面需要設置緩存時,如分類商品列表,活動商品列表

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