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跳轉(zhuǎn)組件C再從組件C跳轉(zhuǎn)組件B緩存保留，但從組件B跳轉(zhuǎn)到組件A后將組件B的緩存清除。

第一種用直接暴力法，在組件切換之后直接刷新

在組件B中加入beforeRouteLeave()方法和Watch監(jiān)聽事件

watch: {
	$route(to, from) {
		if(from.name === 'A'){
			this.route = from.name
			//如果是組件A跳轉(zhuǎn)到的組件B，將組件B刷新
			this.$router.go(0);
		}
	},
},
//組件B跳轉(zhuǎn)后將組件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跳轉(zhuǎn)到的組件B，將組件B刷新
			this.$router.go(0);
		}
	},
},
//組件B跳轉(zhuǎn)后將組件B的 keepAlive 值設置為false
beforeRouteLeave(to, from, next) {
	from.meta.keepAlive = false
	next()
}

組件B跳轉(zhuǎn)到組件C組件B的緩存不清除，在組件C中加入beforeRouteLeave()方法

beforeRouteLeave (to, from, next) {
	//若從組件C跳轉(zhuǎn)到組件B, 將組件B的 keepAlive 值為true
	to.meta.keepAlive = true
	next()
}

第二種方法用$vnode方法獲取DOM元素，將緩存清除

組件B中加入beforeRouteLeave()方法

beforeRouteLeave(to, from, next) {
	if (to.path == "/C") { //這里的路徑是要跳轉(zhuǎn)的需要緩存的路徑
		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組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: