vue项目实现详情页后退缓存之前的数据

vue项目实现详情页后退缓存之前的数据

2019年02月19日 14:54:57 不想写代码的程序员 阅读数：244

 

一、需要缓存的内容：

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被隐藏了。