vue2.0: 页面跳转后，回到此页面时，页面不刷新（多用于列表页与详情编辑页之间的跳转）...

需求：

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)]；

转载于:https://www.cnblogs.com/yiyiboy-core/p/9830533.html