vue項目中keep-alive的使用，從詳情頁傳回清單時儲存浏覽位置

背景描述：

最近在做移動端前端項目中，需要實作以下場景：

1.在頁面查詢清單，進入詳情頁時，傳回需要頁面傳回到上次浏覽的位置

2.由于查詢清單擷取的資料可能會短時間改變，如果前端長時間緩存資料，并不符合業務要求。

3.我在進入詳情頁時可以修改清單的資料，傳回時滾動到，使用者看到的應該是最新的資料

4.每個清單頁面需要用到滑動加載更多資料。

項目中vue的使用：

1.用到keep-alive來緩存頁面

2.當詳情頁中改變清單資料時，配合keep-alive,需要在vue鈎子函數activated中，對資料進行更改

3.在從其他頁面進入時，頁面要重新加載資料。頁面從清單進入其他頁面（非詳情頁）時，銷毀目前的vue執行個體。此時需用到元件内的路由守衛，beforeRouteEnter和beforeRouteLeave

4.清單頁滑動加載

具體實作：

針對以上前三點，頁面的緩存，我們需要用到vue的内置元件keep-alive，來緩存清單頁面，同時配合路由選項來更改頁面的資料。

在設定keep-alive緩存的元件中，首次進入元件，會一次調用元件的鈎子函數：created --> mounted -->activated

再次進入時，隻觸發activated鈎子函數

1.在路由出口渲染元件時配置：

<keep-alive>
          <router-view v-if="$route.meta.keepAlive" class="router-view">
          </router-view>
      </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" class="router-view" ></router-view>
複制代碼           

2.在路由選項中，配置meta屬性，keepAlive為true即為需要緩存的元件，同時設定isBack屬性，用來标示頁面是否是從詳情頁面傳回的。

{
          name: '首頁',
          path: 'index',
          component: Index,
          meta: {
            keepAlive: true, 
            isBack: false
          }
        },
複制代碼           

3.在元件執行個體中，通過beforeRouteEnter(to, from, next)路由守衛，來判斷路由是從哪裡跳轉的，如果是從詳情頁跳轉的，則将目前路由對象的meta.isBack 設定為true,否則設為false

beforeRouteEnter(to, from, next) {
        if (from.path == "/detail") {
          to.meta.isBack = true;
        } else {
          to.meta.isBack = false;
        }
        next();
      },
複制代碼           

為了在其他頁面進入時，更新頁面中的清單資料，我們将在activated鈎子函數中挂載頁面初次進入時的請求資料：

activated() {
        if (!this.$route.meta.isBack) {
          this.list = [];
          this.pageNum = 1;
          this.getList();
        }
        this.$route.meta.isBack = false;
      },
複制代碼           

4.在進入詳情頁，需要對該條資料進行修改時，修改成功後傳回，應該更新清單。

由于我們要在傳回時滾動到浏覽位置，是以不能去背景重新請求資料(否則無法回到之前浏覽的位置)，而是采用前端儲存修改的資料，并在傳回的activated鈎子中對目前清單資料修改。

需要注意的事項：

由于vue自身限制，不能檢測到數組直接修改長度和利用索引設值

是以，需要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)

然後根據頁面離開時儲存的滾動位置，将頁面滾動到浏覽位置。在router-view入口處，watch，$route對象，将keep-alive為true的頁面，滾動到上次浏覽位置。

5.在頁面清單中，我們需要用到分頁加載資料，即滑動加載

在keep-alive元件中，頁面離開時，并不會銷毀目前的vue執行個體，而是儲存在記憶體中。是以就會造成問題：頁面跳轉時，觸發了滑動事件，加載所有儲存在記憶體中的滑動事件，改變了vue執行個體的資料。

是以，我們需要在元件的路由守衛中，在頁面離開時beforeRouteLeave中把滑動事件禁用，然後再在頁面進入的時候，在activated鈎子中恢複滑動事件的。

注意：

使用keep-alive不能銷毀執行個體,vm.$destroy();

否則再進入頁面，即使keep-alive為true也不會儲存元件。如果keep-alive的頁面較多，可以使用,在路由守衛中修改vuex的變量動态改變keep-alive的頁面變量。

簡單寫了個demo，用的移動端ui架構是vux,其中用到的view-box元件，有自己的scroll方法（documment.documentElement.scroll為0）

github.com/Cxy56/vue-k…

原文釋出時間為：2018年06月26日

原文作者：微雨飛燕

本文來源：

掘金 https://juejin.im/entry/5b2c4f426fb9a00e5f3e8d36

如需轉載請聯系原作者