国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue keepAlive 數(shù)據(jù)緩存工具，實(shí)現(xiàn)返回上一個(gè)頁面瀏覽的位置；

everfly / 1655人閱讀

摘要：需求分析背景數(shù)據(jù)列表頁，滾動加載數(shù)據(jù)多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁進(jìn)行編輯修改，刪除操作保存返回上一頁在上面的情況下，想要保持在上次瀏覽位置，并且保持?jǐn)?shù)據(jù)是最新的解決辦法原始的辦法在點(diǎn)擊詳情頁的時(shí)候，記住瀏覽位置，傳遞參數(shù)或者存到本

需求分析

背景：
1.數(shù)據(jù)列表頁，滾動加載數(shù)據(jù)；
2.多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁進(jìn)行編輯（修改，刪除）操作；
3.保存返回上一頁；

在上面的情況下，想要保持在上次瀏覽位置，并且保持?jǐn)?shù)據(jù)是最新的；

解決辦法

1.原始的辦法：在點(diǎn)擊詳情頁的時(shí)候，記住瀏覽位置，傳遞參數(shù)或者存到本地緩存，然后在詳情頁操作完畢后，返回的時(shí)候，路由守衛(wèi)可以判斷，是否詳情頁跳轉(zhuǎn)回來的，然后讓頁面滾動到上次記錄的位置；

思路是這樣，實(shí)際操作很麻煩；
2.推薦辦法：使用vue動態(tài)組件keep-alive,搭配路由守衛(wèi)函數(shù)beforeRouteLeave，以及activated鉤子函數(shù)；

對于鉤子函數(shù)執(zhí)行順序，以及作用詳細(xì)說明，請參考vue組件的生命周期

步驟詳解

我的步驟是按照開發(fā)思路進(jìn)行的，場景就是從商品列表頁——>商品詳細(xì)頁——>商品列表（數(shù)據(jù)緩存）；
開發(fā)之前看到網(wǎng)上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我覺得沒有必要，因?yàn)榱斜眄摬皇且恢毙枰彺鏀?shù)據(jù)的，假如從首頁進(jìn)入，則不需要，所以就在路由守衛(wèi)函數(shù)中判斷是否需要緩存數(shù)據(jù)即可；

以下代碼，使用list.vue代表列表頁；detail.vue代表詳細(xì)頁；

場景1：點(diǎn)擊返回，判斷路由跳轉(zhuǎn)的是否是需要緩存的列表頁：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard") {
      to.meta.keepAlive = true
    }
    next()
  }

由于keepAlive是vue2.0中內(nèi)置組件，所以設(shè)置頁面路由meta.keepAlive = true即可緩存數(shù)據(jù)，路由跳轉(zhuǎn)是利用函數(shù)this.$router.go(-1)；就可以顯示在上次瀏覽的記錄位置；

場景2：編輯詳細(xì)頁數(shù)據(jù)，回到列表頁，則需要將修改的數(shù)據(jù)保存到本地，然后在列表頁的緩存數(shù)據(jù)中，更改顯示即可：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard") {
      to.meta.keepAlive = true
    }
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem("changeData", JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()
  }

列表頁中判斷一下，是否需要修改數(shù)據(jù)：

list.vue

activated () {
    if (this.$route.meta.isChange) {
      let changeData = JSON.parse(window.sessionStorage.getItem("changeData"))
      this.list.forEach(item => {
        if (item.inquiryNo === changeData.inquiryNo) {
          item.inquiryTitle = changeData.inquiryTitle
        }
      })
    }
  }

activated 鉤子函數(shù)，在keep-alive組件激活時(shí)自動執(zhí)行，判斷如果需要修改，從本地取出數(shù)據(jù)，循環(huán)列表數(shù)據(jù)，找出需要修改的那一條，進(jìn)行顯示數(shù)據(jù)的修改（因?yàn)槭桥R時(shí)修改，所以只修改顯示的參數(shù)即可）；

場景3：在詳細(xì)頁點(diǎn)擊刪除該條數(shù)據(jù)

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard" && !this.idDel) {
      to.meta.keepAlive = true
    }
    next()
  }

刪除操作，可以排除后直接不用緩存，或者跟修改一樣的操作，判斷是刪除，臨時(shí)刪除，列表中緩存的數(shù)據(jù)也可以；

上面3種情況通常會同時(shí)出現(xiàn)，所以最后的寫法就是：

detail.vue

beforeRouteLeave (to, from, next) {
    if (to.name === "M2mBoard" && !this.idDel) {
      to.meta.keepAlive = true
    }
    if (this.isChange) {
      let changeData = {
        inquiryNo: this.inquiry.inquiryNo,
        inquiryTitle: this.inquiry.inquiryTitle
      }
      window.sessionStorage.setItem("changeData", JSON.stringify(changeData))
    }
    to.meta.isChange = this.isChange
    next()
  }

list.vue

beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  activated () {
    if (this.$route.meta.isChange) {
      let changeData = JSON.parse(window.sessionStorage.getItem("changeData"))
      this.list.forEach(item => {
        if (item.inquiryNo === changeData.inquiryNo) {
          item.inquiryTitle = changeData.inquiryTitle
        }
      })
    }
  }

列表頁種路由跳轉(zhuǎn)的時(shí)候需要進(jìn)行meta.keepAlive = false操作，防止出現(xiàn)，從detail.vue跳轉(zhuǎn)回來后，list.vue在與其他頁面進(jìn)行路由跳轉(zhuǎn)的時(shí)候，始終處于緩存狀態(tài)，數(shù)據(jù)不更新現(xiàn)象；

注意：在info.vue跳轉(zhuǎn)list.vue的路由活動最好使用this.$router.go(-1)，不然回到list.vue頁面，數(shù)據(jù)緩存了，但是頁面位置不會是上次訪問的位置；具體原因還在研究，哈哈哈...

ok，上面就是在項(xiàng)目開發(fā)使用中用到的keep-alive的整個(gè)思路；記錄一下，以免忘記，還有歡迎參考與指正。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110230.html

相關(guān)文章

  • 前端面試--vue

    摘要：注意重點(diǎn)是獲取更新后的就是在開發(fā)過程中有個(gè)需求是需要在階段操作數(shù)據(jù)更新后的節(jié)點(diǎn)這時(shí)候就需要用到就是用來知道什么時(shí)候更新完成原因在鉤子函數(shù)執(zhí)行的時(shí)候其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行操作無異于徒勞，所以在中一定要將操作的代碼放進(jìn)的回調(diào)函數(shù)中。 1. 最簡單的vue el: dom節(jié)點(diǎn) data: 數(shù)據(jù) Vue 測試實(shí)例 - 菜鳥教程(runoob.com) ...

    coordinate35 評論0 收藏0

  • vue 在移動端體驗(yàn)上的優(yōu)化解決方案

    摘要：去年年底自己搭了一個(gè)在移動端的開發(fā)框架，感覺體驗(yàn)不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗(yàn)優(yōu)化的實(shí)戰(zhàn)。去年年底自己搭了一個(gè)vue在移動端的開發(fā)框架，感覺體驗(yàn)不是很好。上個(gè)星期又要做移動端的項(xiàng)目了。所以我花了兩天時(shí)間對之前的那個(gè)開發(fā)框架做了以下優(yōu)化 自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態(tài)管理緩存組件 better-sc...

    godlong_X 評論0 收藏0

  • 另辟蹊徑：vue單頁面，多路由，前進(jìn)刷新，后退不刷新

    摘要：如何添加這個(gè)條件，判斷用戶是否刷新了頁面呢我們知道，當(dāng)使用后，只有第一次進(jìn)入后會觸發(fā)鉤子函數(shù)，再次進(jìn)入就不再執(zhí)行了。 目的：vue-cli構(gòu)建的vue單頁面應(yīng)用，某些特定的頁面，實(shí)現(xiàn)前進(jìn)刷新，后退不刷新，類似app般的用戶體驗(yàn)。注：　此處的刷新特指當(dāng)進(jìn)入此頁面時(shí)，觸發(fā)ajax請求，向服務(wù)器獲取數(shù)據(jù)。不刷新特指當(dāng)進(jìn)入此頁面時(shí)，不觸發(fā)ajax請求，而是使用之前緩存的數(shù)據(jù)，以便減少服務(wù)器請求...

    Ocean 評論0 收藏0

  • 徹底揭秘keep-alive原理

    摘要：我們留意到，這里不是簡單地將置為，而是遍歷調(diào)用函數(shù)刪除。執(zhí)行組件的鉤子函數(shù)刪除緩存還要對應(yīng)執(zhí)行組件實(shí)例的鉤子函數(shù)。這個(gè)在不可忽視鉤子函數(shù)章節(jié)會再次出場。參考技術(shù)揭秘源碼一、前言 原文鏈接：github.com/qi... 本文介紹的內(nèi)容包括： keep-alive用法：動態(tài)組件&vue-router keep-alive源碼解析 keep-alive組件及其包裹組件的鉤子 keep-a...

    lavnFan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<