Method of Cleaning Cache after vue uses keep alive
- 2021-11-10 08:45:47
- OfStack
What is keepalive?
In normal development, some components do not need to be initialized many times. At this time, we need to persist the components to keep their state unchanged, and we will not reinitialize the components in the next demonstration.
That is to say, keepalive is a built-in component of Vue, which can keep the included components in state or avoid re-rendering. The so-called component cache
Basic usage
<keep-alive>
<component /> // Your components
</keep-alive>
Requirements: Enter the details page from the list page, and then return to the list page to retain the query conditions, but when switching other tab, empty the query conditions.
Solution: It is very simple to retain the query conditions, and directly introduce keep-alive, but if it is cleared, vue itself is not cleared directly by api, so it should be handled separately.
Reference article: http://aspedrom.com/5HD5
router/index, blocking routes and processing:
beforeRouteLeave:function(to, from, next){
// Increase cleanup when leaving the route keep-alive
if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
{// The judgment here is that if you return to 1 Layer, you can change the judgment logic here according to your own business, and decide whether to destroy this layer cache at your discretion.
if (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.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key])
{
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
Also add meta to the route:
{
// Account list
path: '/account',
name: 'account',
component: () => import('../views/account/index.vue'),
meta: { title: ' Account list ' ,rank:1.5}
},
{
// Add an account
path: '/accountadd',
name: 'accountadd',
component: () => import('../views/account/add.vue'),
meta: { title: ' Add an account ' ,rank:2.5}
},
{
// Edit account number
path: '/accountedit/:id',
name: 'accountedit',
component: () => import('../views/account/add.vue'),
meta: { title: ' Edit account number ' ,rank:2.5}
},
{
// Role list
path: '/role',
name: 'role',
component: () => import('../views/role/index.vue'),
meta: { title: ' Role list ' ,rank:1.5}
},
Summarize