vue項目實現詳情頁后退緩存之前的數據
一、需要緩存的內容：
1、后退緩存條件查詢的數據
2、后退緩存分頁信息
二、實現
通過參考網上搜集的資料知道用keepAlive實現
參考地址：https://blog.csdn.net/sinat_17775997/article/details/80950246
1、在路由文件router.js中針對要緩存的頁面進行設置
添加keepAlive: true，通過此字段判斷是否需要緩存當前組件
添加keepAlive: true，通過此字段判斷是否需要緩存當前組件
2、在app.vue文件中添加 ：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
$route.meta.keepAlive表示在1中配置緩存的頁面進行緩存
3、在列表頁面添加路由監聽
（1）當要跳轉到此列表頁面的時候，設置keepAlive= true，緩存當前的頁面數據
（2）在列表頁面添加activated鈎子函數
activated() {
// isUseCache為false時才重新刷新獲取數據
// 因為列表頁面使用keep-alive來緩存組件，所以默認是會使用緩存數據的
if(!this.$route.meta.isUseCache) {
// 清空原有數據
this.allModelsData = []
this.dataTypeList = []
// 這是我們獲取數據的函數
this.fetchModels()
this.getModelDatatype()
this.$route.meta.isUseCache = false
}
},
4、在列表詳情頁添加：
beforeRouteLeave(to, from, next) {
console.log("to.path-->", to.path)
if(to.path == '/masterdatamodel') {
to.meta.isUseCache = true
} else {
to.meta.zai = false
}
next()
},
//to.path == '/masterdatamodel'判斷頁面是否跳轉到列表頁，跳轉到列表頁則保存緩存數據
5、做完以上發現：
（1）列表頁條件查詢后，進入詳情頁，再后退，數據緩存依然在。要求實現
（2）進入詳情頁，再后退，發現分頁不見了，頁數只有1頁，保存的數據為之前進入詳情頁的那頁數據。
排查原因：發現分頁組件dpGrid 使用的v-if="routerAlive"，修改為v-show="routerAlive"，至此分頁緩存實現。
<dpGrid v-if="routerAlive" ref="gridPageComponent" @gridFeedback="onGridFeedback" :is-show="isGridShow" :data-fields="localPageConfig.dataFields" :grid-cols="gridCols" :grid-options="gridOptions" :data-rows="dataRows" :refresh-flag="refreshFlag">
</dpGrid>
修改為：
<dpGrid v-show="routerAlive" ref="gridPageComponent" @gridFeedback="onGridFeedback" :is-show="isGridShow" :data-fields="localPageConfig.dataFields" :grid-cols="gridCols" :grid-options="gridOptions" :data-rows="dataRows" :refresh-flag="refreshFlag">
</dpGrid>
（3）v-if和v-show的區別：
v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱。
詳情參考：https://www.cnblogs.com/wmhuang/p/5420344.html
當使用v-if時候其他分頁信息由於隱藏，后退則被刪除了；而使用v-show，數據仍然保留，其他的分頁的數據通過display：none被隱藏了。