vue的keep-alive组件清除缓存

场景是，从列表跳转到详情页，再次返回列表页时要记住之前列表页的页码、搜索关键词等，采用keepa-live缓存组件。
在路由文件配置meta.keepAlive:

{path: '/List',name: 'List',component: List,meta: { keepAlive: true }
}

修改App.vue的router-view：

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

从别的页面进列表页不能还读取缓存，因此在离开的时候要清除缓存：

beforeRouteLeave(to, from, next) {if (to.path == "/Detail") {from.meta.keepAlive = true;} else {let vnode = that.$vnodelet parentVnode = vnode && vnode.parent;if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {var key = vnode.key == null? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : ''): vnode.key;var cache = parentVnode.componentInstance.cache;var keys  = parentVnode.componentInstance.keys;if (cache[key]) {that.$destroy()// remove keyif (keys.length) {var index = keys.indexOf(key)if (index > -1) {keys.splice(index, 1)}}cache[key] = null}}}next();}

特别注意一点，如果项目中有多层router-view嵌套，那就不要在App.vue里写，而应该在最底下一层router-view所在的位置写，否则缓存会清除失败。

vue的keep-alive组件清除缓存相关推荐

vue项目部署，自动清除缓存配置
清除文件缓存 1.index.html 文件添加 http-equiv(http 响应头) 通过在head标签中添加meta,当浏览器访问index.html时,会向服务器重新请求静态资源.该方法了解 ...
vue关闭页面刷新页面清除缓存
mounted() {this.enterPage()}, destroyed(){this.leavePage() }, methods: { /* 打开:load 关闭:beforeload+un ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
[vue] 怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？
[vue] 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢? 可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等个人简介我是歌谣,欢迎和 ...
[vue] vue怎么缓存当前的组件？缓存后怎么更新？
[vue] vue怎么缓存当前的组件?缓存后怎么更新? keep-alive 通过actived钩子个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
Vue组件设置缓存kepp-alive 后如何获取数据
Vue组件设置缓存kepp-alive 后如何获取数据解决方案 : beforeRouteEnter activated beforeRouteEnter 每次进去组件渲染时,都会执行beforeR ...
vue的pc项目每次扫码登录时，需要清除缓存才能扫码登录成功问题，求解决方案
所遇问题:vue的pc端项目每次扫码登录的时候需要清除缓存才能登录成功先贴几个登录时的效果图如图红色箭头标记的部分,第一次打开项目时,没有进行清除缓存的操作,扫码后,可以看到拿到了我的个人信息在 ...
ant design vue 清空upload组件图片缓存的方法
当关闭这个窗口后,再次打开,上传上传的图片清空在upload 这个组件外加一个key 赋随机值,便可清除缓存缓存代码如下: <a-modal v-model="visible&qu ...
vue 页面保留缓存和清除缓存
路由: routes: [{ path: '/page1', name: page1', component: page1', meta:{ keepAlive:true //true是保存缓存,f ...

vue的keep-alive组件清除缓存

vue的keep-alive组件清除缓存相关推荐

最新文章

热门文章