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