需求:vue
一、列表頁打開後,從其餘頁面進來時不刷新數據;緩存
二、詳情頁返回至列表頁時,數據不刷新,同時瀏覽位置不改變;app
三、編輯頁返回列表頁時,表格該行數據刷新,瀏覽位置不改變;框架
實現思路:ui
一、使用keep-alive來緩存頁面;spa
二、使用路由跳轉時:beforeRouteEnter和beforeRouteLeave 來保存滾動的位置;code
三、當詳情頁能夠編輯時,記錄表格行的index以及ID,保存返回到列表頁時查詢數據 刷新表格行數據;component
在整個頁面框架中須要進行是否緩存的設置router
<div class="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
在路由配置中設置頁面是否緩存以及滾動條的位置(這裏的滾動條不必定是body的,也有多是表格內部的或者是某個容器的)blog
{ path: 'index/query', component: resolve => require([ '@/components/data_center/xxx/index.vue', ], resolve), meta: { keepAlive: true, scollTopPosition: 0 } }
@keepAlive:是否緩存 @scollTopPosition:滾動條位置
在頁面入口文件.vue中,配置beforeRouteEnter和beforeRouteLeave(在離開該頁時記錄scollTopPosition,當從詳情頁返回時,再把記錄的位置賦給對應容器的滾動條)
beforeRouteEnter(to, from, next) { next(vm => { if (from.path === "xxx") { document.getElementById('home_scheme_query').scrollTop = to.meta.scollTopPosition; } }); }, beforeRouteLeave(to, from, next) { if(from.meta.keepAlive) { from.meta.scollTopPosition = document.getElementById('home_scheme_query').scrollTop; } next(); }
以上就是列表頁跳轉到詳情頁,頁面數據緩存的一種解決方案。
從列表頁中的表格內部跳轉到詳情頁,當詳情頁存在編輯的能力時
一、跳轉到詳情頁時記錄數據在表格的哪一行($index)以及id(數據相對簡單 可記錄在query中);
二、詳情頁保存時,返回到列表頁觸發方法,根據id獲得該行數據,而後刷新該行數據便可[vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)];