vue使用keep-alive实现页面进步革新,退却缓存,完善运行无bug

藏宝库编辑 · 2024-9-21 21:41:17

vue中,我们偶尔候必要实现这种场景:
1.搜刮页面到列表页面，必要革新重新获取数据。
2.从详情页面返回列表页面必要记着前次欣赏的状态。具体流程如下：

第一步:在路由设置文件中为列表页设置meta参数，内里包罗useCatch和keepAlive
{ path: "/sportPrdtList", name: "sportPrdtList", component: resolve => require(["@/views/iceArea/sportPrdtList"], resolve), meta: { keepAlive: true,//是否缓存组件 useCatch:false//是否用缓存 } },第二步:在App文件中如下设置
<keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" />第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回变乱的时间,将leaveTag修改为back,然后在beforeRouteLeave中如下:
beforeRouteLeave (to, from, next) { if (this.$route.meta && this.$route.meta.keepAlive && this.leaveTag == 'back') {//清空缓存而且将缓存标记(useCatch)置位false let vnode = this.$vnode let parentVnode = vnode && vnode.parent; if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) { let key = vnode.key == null ? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `:

{vnode.componentOptions.tag}` : '') : vnode.key;//获取当前实例的key let cache = parentVnode.componentInstance.cache;//获取keep-alive中的缓存对象 let keys = parentVnode.componentInstance.keys;//获取keep-alive中的key数组 if (cache[key]) { this.$destroy()//烧毁当前页面实例 if (keys.length) {//删除当前页面的key let index = keys.indexOf(key) if (index > -1) { keys.splice(index, 1) } } cache[key] = null//删除当前页面缓存 } } this.$route.meta.useCatch = false } else { if (this.$route.meta && this.$route.meta.keepAlive) {//判定原来是否用到keep-alive this.$route.meta.useCatch = true } else {//没有缓存直接放行 return next() } } next() },第四步:在列表页的actived生命周期函数中根据useCatch字段判定是否必要缓存:
activated () { if (!this.$route.meta.useCatch) { //不消缓存的情况,起首扫除之前缓存的数据然后再获取数据 console.log('不消缓存的情况', this); this.createdMethods()//created生命周期方法 this.mountedMethods()//mounted生命周期方法 } else { this.$refs.dataList.scrollTop = this.scrollTop//记载页面滚动高度 console.log('用缓存的情况') } },到此竣事

vue使用keep-alive实现页面进步革新,退却缓存,完善运行无bug

所属分类: 问答交流

新帖推荐: 30日

推荐作品