vue2.0: 頁面跳轉後,回到此頁面時,頁面不刷新(多用於列表頁與詳情編輯頁之間的跳轉)

需求: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)];

相關文章
相關標籤/搜索