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"]});
```