Vue keep-alive component usage and how to clear cache

1. keepAlive

Add keepAlive to the router's js file

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

Add the following code to

<keep-alive>
	<router-view v-if="$" />
</keep-alive>
<router-view v-if="!$" />

2. Several ways to clear cache

There are three components A, B, and C that need to add cache to component B, jump from component B to component C and then jump from component C to component B cache reserve, but after jumping from component B to component A, the cache of component B is cleared.

The first method is to use direct brute force, which directly refreshes after component switching

Add beforeRouteLeave() method and Watch listening event in component B

watch: {
	$route(to, from) {
		if( === 'A'){
			 = 
			//If it is component B that component A jumps to, refresh component B			this.$(0);
		}
	},
},
//After component B jump, set the keepAlive value of component B to falsebeforeRouteLeave(to, from, next) {
	 = false
	next()
}

watch: {
	$route(to, from) {
		if( === 'A'){
			 = 
			//If it is component B that component A jumps to, refresh component B			this.$(0);
		}
	},
},
//After component B jump, set the keepAlive value of component B to falsebeforeRouteLeave(to, from, next) {
	 = false
	next()
}

Component B jumps to component C and component B cache is not cleared. Add beforeRouteLeave() method to component C.

beforeRouteLeave (to, from, next) {
	//If you jump from component C to component B, turn the keepAlive value of component B to true	 = true
	next()
}

The second method uses the $vnode method to obtain the DOM element and clear the cache

Add beforeRouteLeave() method to component B

beforeRouteLeave(to, from, next) {
	if ( == "/C") { //The path here is the path that needs to be redirected and needs to be cached		 = true;
	} else {
		let Vnode = this.$vnode;
		let parentVnode = Vnode &amp;&amp; ;
		if (parentVnode &amp;&amp;  &amp;&amp; ) {
			var key =  == null ?  + ( ? `::${}` : '') : ;
			var cache = ;
			var keys  = ;
			if (cache[key]) {
				this.$destroy();
				if () {
					var index = (key);
					if (index &gt; -1) {
						(index, 1);
					}
				}
				cache[key] = null;
			}
		}
	}
	next();
}

Add beforeRouteLeave() and beforeRouteEnter() methods in component C

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

This is the article about the use of Vue keep-alive components and the method of clearing caches. For more related contents of Vue keep-alive components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!