vue-router-keep-alive-helper
v0.1.0
Published
Auto destroy keepAlive components when go back
Downloads
96
Maintainers
Readme
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.
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
orreplacing
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 ✅ 👉🏻For Vue 3.x
- unit testing support ✅ 👉🏻For Vue 3.x版本
Sample code
Twitter zippowxk,Email: [email protected]