Vue.js(2.x)缓存自动管理插件，自动创建、销毁缓存

vue-router-keep-alive-helper

Vue Router Keep-alive Helper is an automatic tool for managing cache pages in the Vue.js project, only one line of configuration code can be used.

For Vue 3.x

English | 简体中文

Why you need this helper：

When developing a SPA project of Vue.js with vue-router, <keep-alive> is always used to cach pages which are already routed,there are three options to manage the cache tree inside it,

include - Only components with matching names will be cached. exclude - Any component with a matching name will not be cached. max - The maximum number of component instances to cache.

But these options are only useful in simple situations, otherwise they're useless,such as:

destroy current page cache when routing back. cache more than one instances which using same component,and destroy one of them specifically. Features Recognize pushing going back or replacing automatically Destroy current page cache when routing back Always create and cache a new instance,even if this component is already cached Keep the same status after browser refreshing replaceStay white list allows cache pages when replacing Usage npm i -s vue-router-keep-alive-helper keep alive the router-view

... <keep-alive> <router-view/> </keep-alive> ... create helper after router is created

import createHelper from 'vue-router-keep-alive-helper' import Vue from 'vue' const router = new VueRouter({routes}) createHelper({Vue, router}); ... Config replace white list

When switching the tab bar, some tab pages need to be cached，you can set the paths in replaceStay option

createHelper({Vue, router, replaceStay:["/home","/cart","/mine"]}); Release log v0.0.21 support un-full keep-alive routes add build script TODO: beforeRouteUpdate hook warning to users Vue.js 3 support