Vue keepAlive 數據緩存工具，實現返回上一個頁面瀏覽的位置；

everfly 發布于2019-08-26 18:27 / 1645人閱讀

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

需求分析

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

在上面的情況下，想要保持在上次瀏覽位置，并且保持數據是最新的；

解決辦法

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

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

對于鉤子函數執行順序，以及作用詳細說明，請參考vue組件的生命周期

步驟詳解

我的步驟是按照開發思路進行的，場景就是從商品列表頁——>商品詳細頁——>商品列表（數據緩存）；
開發之前看到網上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我覺得沒有必要，因為列表頁不是一直需要緩存數據的，假如從首頁進入，則不需要，所以就在路由守衛函數中判斷是否需要緩存數據即可；

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

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

detail.vue

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

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

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

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()
  }

列表頁中判斷一下，是否需要修改數據：

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 鉤子函數，在keep-alive組件激活時自動執行，判斷如果需要修改，從本地取出數據，循環列表數據，找出需要修改的那一條，進行顯示數據的修改（因為是臨時修改，所以只修改顯示的參數即可）；

場景3：在詳細頁點擊刪除該條數據

detail.vue

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

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

上面3種情況通常會同時出現，所以最后的寫法就是：

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
        }
      })
    }
  }

列表頁種路由跳轉的時候需要進行meta.keepAlive = false操作，防止出現，從detail.vue跳轉回來后，list.vue在與其他頁面進行路由跳轉的時候，始終處于緩存狀態，數據不更新現象；

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

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

GPU云服務器云服務器 js返回上一個頁面保留數據 js返回數據給上一個頁面 java返回頁面實現 js調用瀏覽器的返回數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110230.html

前端面試--vue

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

coordinate35 2019-08-26 13:45 評論0 收藏0
vue 在移動端體驗上的優化解決方案

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

godlong_X 2019-05-22 11:25 評論0 收藏0
另辟蹊徑：vue單頁面，多路由，前進刷新，后退不刷新

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

Ocean 2019-08-21 17:43 評論0 收藏0
徹底揭秘keep-alive原理

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

lavnFan 2019-05-23 17:29 評論0 收藏0