vue keepAlive

需求打开页面需要有类似浏览器tag一样可关闭可切换页面

首先想的是keepalive缓存，在路由文件中设置keepalive为false，router-view如下图啦

在打开一个页面添加到tag里的时候设置keepalive 为true，移除的时候再设置为false

首先先封装一个mixins：keepAlive

通过beforeRouteLeave判断移除页面时删除缓存

beforeRouteLeave: function(to, from, next) {// console.log(to, from, 'keepalivekeepalive')if (!from.meta.keepAlive) {if (from.meta.cache) from.meta.cache = falseif (this.$vnode && this.$vnode.data.keepAlive) {if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {if (this.$vnode.componentOptions) {var key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.keyvar cache = this.$vnode.parent.componentInstance.cachevar keys = this.$vnode.parent.componentInstance.keysif (cache[key]) {if (keys.length) {var index = keys.indexOf(key)if (index > -1) {keys.splice(index, 1)}}delete cache[key]}}}}}next()
}

这个时候发现只有在当前页面关闭并且keepAlive为true才会移除缓存，当我在别的页面关闭并不会触发方法。

于是又用到了beforeRouteEnter

beforeRouteEnter: function(to, from, next) {console.log(to.meta.keepAlive, 'keepalivekeepalivebeforeRouteEnter');if (!to.meta.keepAlive) {next(vm => {const vnode = vm.$vnodeif (vnode && vnode.data.keepAlive) {if (vnode.parent && vnode.parent.componentInstance && vnode.parent.componentInstance.cache) {if (vnode.componentOptions) {var cache = vnode.parent.componentInstance.cachevar keys = []var name = vm.$route.namefor (var i in cache) {if (cache[i].tag.indexOf(name) > -1) {keys.push(i)}}console.log(cache, 'keepalivecachecache');keys.length && keys.map(item => {delete cache[item]})console.log(cache, 'keepalivecache');vm.reload()}}}})} else {next()}
},

keepAlive只有在进入页面之后才会设置为true，进入路由之前还是false，当路由为false的时候执行删除缓存，为true的时候直接进入页面。

然而新的问题来了，因为时再next里读取vm实例做的判断，所以会先读取缓存再删掉缓存，页面再切换到别的页面再切换回来才会显示正常

所以在router-view上做了一个判断isRouterAlive

封装的keepAlive文件里 inject: ['reload'],

在beforeRouteEnter里面删除缓存后调取reload刷新router-view页面

需求圆满完成w

然后发现在编辑页面不关掉，返回列表点击新增打开的还是编辑页面

在跳转页面之前增加方法 /path1/path2

setRouterKeepAlive(path1, path2) {const routes = this.$router.options.routesroutes.length && routes.map(item => {if (item.path === `/${path1}`) {item.children.length && item.children.map(it => {if (it.path.indexOf(path2) > -1) {it.meta.keepAlive = falseconsole.log(it, 'this.$routethis.$route1')}})}})console.log(path1, path2, this.$route, 'this.$routethis.$route');
}

vue keepAlive相关推荐

vue keep-alive解决关闭标签动态缓存问题
直接上代码: <keep-alive :include='topNavMentNames'> <router-view ></router-view> </k ...
vue keep-alive保存路由状态2 (高级用法,接上篇)
接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...
vue keepalive 动态设置缓存
场景:A首页.B列表页.C详情页 B---->C 缓存'列表1'详情的数据 A---->C 读取'列表1'详情的数据 B---->C (希望清除'列表1'的缓存,变成缓存'列表2'详 ...
Vue keep-alive实践总结
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...
vue keep-alive
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中, 防止重复渲染DOM; 包裹动态组件时,会缓存不活动的组件实例,而不是销毁,它是一个抽象的组件不会渲染一个DOM元素,也 ...
Vue keep-alive的使用
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...
vue keep-alive 缓存不生效解决方案
一.作用 vue [缓存]方案,保留组件状态或避免重新渲染,能够缓存当前页面的所有数据二.用法与**[动态组件]**一起使用:(会缓存不活动的组件实例,而不是销毁它们) <keep-aliv ...
Vue—keepAlive 动态管理页面缓存
简介 <keep-alive>是Vue的内置组件,当他包裹组件时,会对组件进行缓存,不去销毁组件. 首次进入页面时,会触发mounted和activated钩子,当页面被缓存下来后,进入页 ...
vue keep-alive应用场景及如何使用
进阶版:vue vuex+keep-alive进阶用法(灵活缓存页面,主要是移动端)_余温无痕的博客-CSDN博客 vue3 keep-alive+vuex配合使用(简单易用)_余温无痕的博客-CSD ...
vue keep-alive缓存原理
keep-alive的原理: 在内部维护了一个keys数组和一个cache缓存对象.keys数组会记录缓存组件的key值,若没有指定key值就会自动生成一个唯一的key值.cache对象会以key值为 ...

vue keepAlive

vue keepAlive相关推荐

最新文章

热门文章