需求:
1、列表页打开后,从其他页面进来时不刷新数据;
2、详情页返回至列表页时,数据不刷新,同时浏览位置不改变;
3、编辑页返回列表页时,表格该行数据刷新,浏览位置不改变;
实现思路:
1、使用keep-alive来缓存页面;
2、使用路由跳转时:beforeRouteEnter和beforeRouteLeave 来保存滚动的位置;
3、当详情页可以编辑时,记录表格行的index以及ID,保存返回到列表页时查询数据 刷新表格行数据;
在整个页面框架中需要进行是否缓存的设置
<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的,也有可能是表格内部的或者是某个容器的)
{ 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(); }
以上就是列表页跳转到详情页,页面数据缓存的一种解决方案。
从列表页中的表格内部跳转到详情页,当详情页存在编辑的能力时
1、跳转到详情页时记录数据在表格的哪一行($index)以及id(数据相对简单 可记录在query中);
2、详情页保存时,返回到列表页触发方法,根据id得到该行数据,然后刷新该行数据即可[vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)];