最近在做移動端前端項目中，需要實現以下場景：
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鈎子函數中掛載頁面初次進入時的請求數據：
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）
https://github.com/Cxy56/vue-keepalive-demo