快捷導(dǎo)航

vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存

更新時(shí)間：2019年03月27日 14:28:42 作者：豆奶柚子君

這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

甲爸爸提了一個(gè)需求，希望公眾號(hào)內(nèi)的商城能夠像app一樣，從商品詳情頁(yè)跳轉(zhuǎn)至列表頁(yè)及其他列表頁(yè)時(shí)，可以實(shí)現(xiàn)列表頁(yè)緩存（數(shù)據(jù)不刷新、位置固定到之前點(diǎn)的商品的位置）

本來(lái)想著scrollBehavior應(yīng)該可以滿(mǎn)足，但是實(shí)際操作中發(fā)現(xiàn)：如果列表帶著分頁(yè)，位置是不會(huì)定位到點(diǎn)擊的位置的

在網(wǎng)上轉(zhuǎn)了一圈，終于找到適合自己的方法——beforeRouteLeave

注：beforeRouteLeave只對(duì)一級(jí)頁(yè)面起作用，不適用于children中的其他二級(jí)或其他級(jí)別的頁(yè)面

以上是準(zhǔn)備工作，接下來(lái) 可以步入正題了：

找到入口掛載頁(yè)面：App.vue 在router-view外部包裹一個(gè)keep-alive的標(biāo)簽

因?yàn)椴皇撬许?yè)面都需要緩存，所以把需要緩存的頁(yè)面中加入name值，并將name值加入keep-alive中

<keep-alive v-if="isRouterAlive" include="starShop" >
  <router-view></router-view>
</keep-alive>

當(dāng)然，僅僅是這些，是不能實(shí)現(xiàn)緩存的，

剛開(kāi)始我是學(xué)著網(wǎng)上的方法，這樣寫(xiě)的，當(dāng)從列表點(diǎn)入詳情頁(yè)時(shí)，就將 列表頁(yè)的keepalive值，賦為true （實(shí)現(xiàn)緩存）

beforeRouteLeave(to, from, next) {
  if(from.path == '/sale/newGoods/index' && to.path == '/goods/detail') {
    from.meta.keepAlive = true;
    this.loading = true;
    next();
    return
  } else {
    from.meta.keepAlive = false;
    window.location.reload();
    this.$destroy();
    next();
    return
  }
},

但是后期甲爸爸發(fā)現(xiàn)一個(gè)bug：當(dāng)我從列表一點(diǎn)擊進(jìn)入詳情之后，如果直接從詳情頁(yè)，點(diǎn)擊進(jìn)入別的店鋪列表頁(yè)，即列表二，最新的列表頁(yè)內(nèi)展示的商品列表是之前的數(shù)據(jù)，并沒(méi)有變?yōu)樽钚碌牡赇伭斜韮?nèi)容， 即列表二頁(yè)面展示的還是列表一的商品

玩大了，這個(gè)問(wèn)題比較著急啊，萬(wàn)一把顧客繞暈了，人家不買(mǎi)東西了，那我罪過(guò)不就大了咩

晚上趁著月黑風(fēng)高、夜深人靜的時(shí)候，我苦思冥想，終于把這個(gè)社會(huì)毒瘤挖掉了

我絕不是屈居于甲爸爸的淫威之下，只是因?yàn)槲覍?duì)技術(shù)的執(zhí)著，過(guò)度追求完美的我，忍受不聊我的東西出現(xiàn)這樣大的漏洞

要看解決辦法的直接來(lái)這 ↓↓↓↓↓↓

首先摒棄上面的列表頁(yè)面的方法

第一步：找到商品詳情頁(yè)，最為主角之一，我在這里用到了beforeRouteEnter、beforeRouteLeave

beforeRouteEnter (to, from, next) {
  next(vm =>{
    vm.formUrl = from.path;
    console.log(vm.formUrl)
  });
},
beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false;
  if(to.path == this.formUrl){
    to.meta.keepAlive = true;
    next();
    return
  }else{
    to.meta.KeepAlive = false;
    window.localStorage.removeItem('isRefresh')
    this.$destroy();
    next();
    return
  }
},

beforeRouteEnter：進(jìn)入路由之前執(zhí)行的函數(shù)（拿到列表一的路由）

beforeRouteLeave：離開(kāi)路由之前執(zhí)行的函數(shù)（拿到列表二的路由）

通過(guò)這兩個(gè)鉤子，可以成功的拿到事件的另外兩位主角路由（列表一、列表二）

在詳情頁(yè)中，當(dāng)離開(kāi)該頁(yè)之前，在beforeRouteLeave內(nèi)進(jìn)行列表一、列表二的路由比較

若兩路由相同，則跳轉(zhuǎn)目的頁(yè)面（to.meta.keepAlive）值為true，列表頁(yè)面進(jìn)行緩存（比如從詳情頁(yè)返回的時(shí)候）

若兩路由不同，則跳轉(zhuǎn)目的頁(yè)面發(fā)生了變化（比如從鞋帽列表——>鞋子商品——>鞋子列表），則鞋子列表頁(yè)面不需要緩存，需要刷新獲取最新的鞋子列表數(shù)據(jù)

第二步：處理事件的第二主角——列表頁(yè)面

這里我僅用到了beforeRouteEnter

這個(gè)鉤子中，我們可以拿到當(dāng)前頁(yè)面的keepAlive值

這個(gè)值是在詳情頁(yè)中就已經(jīng)給定的

如果是true，表示緩存，否則為不緩存（刷新）

防止頁(yè)面一直刷新，變成死亡函數(shù)，我們要在data中聲明一個(gè)變量isRefresh

isRefresh: window.localStorage.getItem('isRefresh') || true

beforeRouteEnter (to, from, next) {
  next(vm =>{
    if(to.meta.keepAlive != true && to.meta.keepAlive != null){
      vm.goods=[];
      window.localStorage.setItem('isRefresh',true)                
            if(JSON.stringify(window.localStorage.getItem('isRefresh')) != false){
                  
                window.localStorage.setItem('isRefresh',false)
        location.reload();
      }  
    }
  });
  return
},

如果當(dāng)前頁(yè)to.meta.keepAlive值不為true，且值存在，則需刷新頁(yè)面

防止頁(yè)面一直刷新，

window.localStorage.setItem('isRefresh',true)

設(shè)置緩存變量isRefresh，值為true（表示需要刷新）

當(dāng)to.meta.keepAlive值不為true且isRefresh值為true，頁(yè)面刷新，且isRefresh賦值為false，即關(guān)閉刷新

vm.goods=[];是當(dāng)頁(yè)面跳去新的列表頁(yè)刷新之前，會(huì)出現(xiàn)短暫的列表展示，為了避免不必要的誤導(dǎo)，在檢測(cè)到是跳轉(zhuǎn)到新的列表頁(yè)時(shí)，我將列表頁(yè)的goods列表情況，視覺(jué)感受會(huì)好一些

因項(xiàng)目不同而異，不需要可以去掉

多張頁(yè)面之間跳轉(zhuǎn)，判斷是否需要緩存或刷新獲取新數(shù)據(jù)，就是這樣了

或許因?yàn)闃I(yè)務(wù)需求不同，技術(shù)處理方式可能會(huì)不同，希望能幫助到各位，或者給各位一些啟發(fā)，也希望大家多多支持腳本之家。

您可能感興趣的文章: