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…