最近在做PC端前端項目中，需要實現以下場景：
1.在頁面查詢列表，進入詳情頁時，返回需要頁面返回到上次瀏覽的位置（保留列表之前的當前頁和搜索條件數據）
2.由于查詢列表獲取的數據可能會短時間改變，如果前端長時間緩存數據，并不符合業(yè)務要求。
3.我在進入詳情頁時可以修改列表的數據，返回時滾動到，用戶看到的應該是最新的數據
4.每個列表頁面需要保存當前頁和搜索條件數據。
針對以上前幾點：
頁面的緩存，我們需要用到vue的內置組件keep-alive，來緩存列表頁面，同時配合路由選項來更改頁面的數據。
在設置keep-alive緩存的組件中，首次進入組件，會一次調用組件的鉤子函數：created --> mounted -->activated 再次進入時，只觸發(fā)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)路由守衛(wèi)，來判斷路由是從哪里跳轉的，如果是從詳情頁跳轉的，則將當前路由對象的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實例，而是保存在內存中。因此就會造成問題：頁面跳轉時，觸發(fā)了滑動事件，加載所有保存在內存中的滑動事件，改變了vue實例的數據。
因此，我們需要在組件的路由守衛(wèi)中，在頁面離開時beforeRouteLeave中把滑動事件禁用，然后再在頁面進入的時候，在activated鉤子中恢復滑動事件的。
注意： 使用keep-alive不能銷毀實例,vm.$destroy(); 否則再進入頁面，即使keep-alive為true也不會保存組件。如果keep-alive的頁面較多，可以使用,在路由守衛(wèi)中修改vuex的變量動態(tài)改變keep-alive的頁面變量。
