Vue keep-alive组件的使用及如何清除缓存

 更新时间:2023年10月14日 16:16:06   作者:PikY~  
本文介绍了Vue keep-alive组件的使用及如何清除缓存,给大家分享清除缓存的几种方法,结合实例代码给大家讲解的非常详细,需要的朋友跟随小编一起看看吧

1. keepAlive

在router的js文件中加入keepAlive

{
	path: "/A",
	name: 'A',
	meta:{ 
    	name: 'A' ,
   		keepAlive: false ,
	},
    component: resolve => require(['../A.vue'], resolve)
},
{
    path: "/B",
    name: 'B',
    meta:{ 
   		name: 'B' ,
   		keepAlive: true ,
   	},
    component: resolve => require(['../B.vue'], resolve)
},
{
    path: "/C",
    name: 'C',
    meta:{ 
   		name: 'C' ,
   		keepAlive: false,
   	},
    component: resolve => require(['../C.vue'], resolve)
},

在APP.vue中加入以下代码

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

2. 清除缓存的几种方法

有A,B,C三个组件需要在B组件中加入缓存,从组件B跳转组件C再从组件C跳转组件B缓存保留,但从组件B跳转到组件A后将组件B的缓存清除。

第一种用直接暴力法,在组件切换之后直接刷新

在组件B中加入beforeRouteLeave()方法和Watch监听事件

watch: {
	$route(to, from) {
		if(from.name === 'A'){
			this.route = from.name
			//如果是组件A跳转到的组件B,将组件B刷新
			this.$router.go(0);
		}
	},
},
//组件B跳转后将组件B的 keepAlive 值设置为false
beforeRouteLeave(to, from, next) {
	from.meta.keepAlive = false
	next()
}

watch: {
	$route(to, from) {
		if(from.name === 'A'){
			this.route = from.name
			//如果是组件A跳转到的组件B,将组件B刷新
			this.$router.go(0);
		}
	},
},
//组件B跳转后将组件B的 keepAlive 值设置为false
beforeRouteLeave(to, from, next) {
	from.meta.keepAlive = false
	next()
}

组件B跳转到组件C组件B的缓存不清除,在组件C中加入beforeRouteLeave()方法

beforeRouteLeave (to, from, next) {
	//若从组件C跳转到组件B, 将组件B的 keepAlive 值为true
	to.meta.keepAlive = true
	next()
}

第二种方法用$vnode方法获取DOM元素,将缓存清除

组件B中加入beforeRouteLeave()方法

beforeRouteLeave(to, from, next) {
	if (to.path == "/C") { //这里的路径是要跳转的需要缓存的路径
		from.meta.keepAlive = true;
	} else {
		let Vnode = this.$vnode;
		let 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]) {
				this.$destroy();
				if (keys.length) {
					var index = keys.indexOf(key);
					if (index > -1) {
						keys.splice(index, 1);
					}
				}
				cache[key] = null;
			}
		}
	}
	next();
}

在组件C中加入beforeRouteLeave()和beforeRouteEnter()方法

data(){
	return{
		Fromvnode: null
	}
}
beforeRouteEnter(to, from, next) {
	next(vm => {
		vm.Fromvnode = from
	})
},
beforeRouteLeave(to, from, next) {
	if (to.path !== '/B') {
		this.Fromvnode.meta.keepAlive = false
	}
	next()
}

到此这篇关于Vue keep-alive组件的使用以及清除缓存的方法的文章就介绍到这了,更多相关Vue keep-alive组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中的计算属性computed传参方式

    Vue中的计算属性computed传参方式

    这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本

    解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,

    这篇文章主要给大家介绍了关于解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本的相关资料,这个报错是由于在系统上禁止运行脚本导致的,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Vue2.0实现组件数据的双向绑定问题

    Vue2.0实现组件数据的双向绑定问题

    这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • vue项目优化之通过keep-alive数据缓存的方法

    vue项目优化之通过keep-alive数据缓存的方法

    本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue项目使用CDN引入的配置与易出错点

    vue项目使用CDN引入的配置与易出错点

    在日常开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决,下面这篇文章主要给大家介绍了关于vue项目使用CDN引入的配置与易出错点的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    vue从后台渲染文章列表以及根据id跳转文章详情详解

    这篇文章主要给大家介绍了关于vue从后台渲染文章列表以及根据id跳转文章详情的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue中的axios配置及接口请求路径api配置

    vue中的axios配置及接口请求路径api配置

    这篇文章主要介绍了vue中的axios配置及接口请求路径api配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • VUE DOM加载后执行自定义事件的方法

    VUE DOM加载后执行自定义事件的方法

    今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue-CLI 3 scp2自动部署项目至服务器的方法

    Vue-CLI 3 scp2自动部署项目至服务器的方法

    这篇文章主要介绍了Vue-CLI 3 scp2自动部署项目至服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue的click事件防抖和节流处理详解

    Vue的click事件防抖和节流处理详解

    今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论