欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年03月27日 14:28:42   作者:豆奶柚子君  
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁實(shí)現(xiàn)列表頁緩存,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

注:beforeRouteLeave只對一級頁面起作用,不適用于children中的其他二級或其他級別的頁面 

以上是準(zhǔn)備工作,接下來 可以步入正題了:

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

因?yàn)椴皇撬许撁娑夹枰彺?,所以把需要緩存的頁面中加入name值,并將name值加入keep-alive中

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

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

剛開始我是學(xué)著網(wǎng)上的方法,這樣寫的,當(dāng)從列表點(diǎn)入詳情頁時(shí),就將 列表頁的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)一個bug: 當(dāng)我從列表一點(diǎn)擊進(jìn)入詳情之后,如果直接從詳情頁,點(diǎn)擊進(jìn)入別的店鋪列表頁,即列表二,最新的列表頁內(nèi)展示的商品列表是之前的數(shù)據(jù),并沒有變?yōu)樽钚碌牡赇伭斜韮?nèi)容 , 即列表二頁面展示的還是列表一的商品

玩大了,這個問題比較著急啊,萬一把顧客繞暈了,人家不買東西了,那我罪過不就大了咩

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

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

要看解決辦法的直接來這    ↓↓↓↓↓↓

首先摒棄上面的列表頁面的方法

第一步:找到商品詳情頁,最為主角之一,我在這里用到了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:離開路由之前執(zhí)行的函數(shù)(拿到列表二的路由)

通過這兩個鉤子,可以成功的拿到事件的另外兩位主角路由(列表一、列表二)

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

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

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

第二步:處理事件的第二主角——列表頁面

這里我僅用到了beforeRouteEnter

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

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

如果是true,表示緩存,否則為不緩存(刷新)

防止頁面一直刷新,變成死亡函數(shù),我們要在data中聲明一個變量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)前頁to.meta.keepAlive值不為true,且值存在,則需刷新頁面

防止頁面一直刷新,

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

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

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

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

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

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

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

相關(guān)文章

  • Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法

    Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法

    本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • vue 粒子特效的示例代碼

    vue 粒子特效的示例代碼

    本篇文章主要介紹了vue 粒子特效的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法

    Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法

    這篇文章主要介紹了Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法,插槽的作用是在子組件中某個位置插入父組件的自定義html結(jié)構(gòu)和data數(shù)據(jù),下面詳細(xì)內(nèi)容需要的小伙伴可以參考一下
    2022-03-03
  • Vue下拉選擇框Select組件使用詳解(一)

    Vue下拉選擇框Select組件使用詳解(一)

    這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化,并捕捉到

    vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化,并捕捉到

    這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化,并捕捉到問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解

    Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解

    Vue的響應(yīng)式實(shí)現(xiàn)是借助Object.defineProperty通過重寫getter和setter方法來進(jìn)行的數(shù)據(jù)劫持,Vue3通過Proxy代理攔截對象中任意屬性的變化,通過Reflect反射對源對象的屬性進(jìn)行操作,然后再在get里收集依賴在set里派發(fā)更新
    2023-03-03
  • vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法

    vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法

    這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • vue中的依賴注入provide和inject簡單介紹

    vue中的依賴注入provide和inject簡單介紹

    這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法,本文通過組價(jià)刷新的案列給大家詳細(xì)講解,需要的朋友可以參考下
    2022-11-11
  • Vue?仿QQ左滑刪除組件功能

    Vue?仿QQ左滑刪除組件功能

    前幾天朋友在做vue項(xiàng)目開發(fā)時(shí),有人反映?IOS?上面的滑動點(diǎn)擊有點(diǎn)問題,讓我們來幫忙解決,于是我就重寫了代碼,下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺,需要的朋友參考下吧
    2018-03-03
  • Vue實(shí)現(xiàn)登錄記住賬號密碼功能的思路與過程

    Vue實(shí)現(xiàn)登錄記住賬號密碼功能的思路與過程

    最近在學(xué)習(xí)vue,發(fā)現(xiàn)了vue的好多坑,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)登錄記住賬號密碼功能的思路與過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-11-11

最新評論