项目需求：使用keep-alive 实现项目中部分页面的存储功能，当关闭页面需求清除掉缓存，tab切换页面时需要保留内容进行缓存；

问题：关闭后，重新打开页面，内容仍然存在，需要强制清除keep-alive 保留的缓存内容；

效果如下：

实过程及思路：部分代码

1、keep-alive 使用保留缓存实现：

router配置：

undefined 或者

<keep-alive><router-view v-if="$route.meta.keepalive" :key="key" /></keep-alive><router-view v-if="!$route.meta.keepalive" :key="key" />

关闭菜单操作：

pageDelete(id, tag) {this.$store.commit('tagBar/tagDelete', id)}

store 存储设置：

undefined

在需要的页面中处理设置；

//从store 去除删除的内容标识；
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['closeTagName'])
},
/******** 其他内容略过 ********/
// 路由离开，处理需要销毁的内容
beforeRouteLeave(to, from, next) {
if (this.closeTagName === '添加客户') {
this.$router.history.current.meta.keepalive = false
// 设置下一个路由的 meta
to.meta.keepAlive = false // 不缓存
this.$store.commit('tagBar/setCloseTagName')
} else {
this.$router.history.current.meta.keepalive = true
// 设置下一个路由的 meta
to.meta.keepAlive = true // 不缓存
}
next()
}

ITPub博客

KeepAlive 简单使用，及手动去除内容存储

最新文章