https://github.com/zippowxk/stack-keep-alive
Vue.js 3 stack type Keep-Alive component, routing cache automatic management tool. Vue.js 3 堆栈式 Keep-Alive 组件，路由缓存自动管理工具
https://github.com/zippowxk/stack-keep-alive
cache improvement keep-alive transition vue vue-router vue3 vuejs
Last synced: about 1 month ago
JSON representation
Vue.js 3 stack type Keep-Alive component, routing cache automatic management tool. Vue.js 3 堆栈式 Keep-Alive 组件，路由缓存自动管理工具
- Host: GitHub
- URL: https://github.com/zippowxk/stack-keep-alive
- Owner: Zippowxk
- Created: 2022-04-10T13:57:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-27T09:20:49.000Z (about 3 years ago)
- Last Synced: 2025-08-09T16:46:16.692Z (2 months ago)
- Topics: cache, improvement, keep-alive, transition, vue, vue-router, vue3, vuejs
- Language: JavaScript
- Homepage:
- Size: 665 KB
- Stars: 127
- Watchers: 4
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stack-Keep-Alive
## Introdaction
English | [中文](./README_CN.md)
`Stack-Keep-Alive` is an automatic management tool for page cache in `Vue.js` (Vue 3.x) project.
[Vue2.x Version](https://github.com/Zippowxk/vue-router-keep-alive-helper)
[Online Demo](http://xinkai.wang/stack-keep-alive-sample/dist/), Check the Vue-devtools Panel
### Why do you need this plugin
The built-in `keep-alive` component is very useful in development, but it is not intelligent enough, it is difficult to clean up the page cache later, you need to use `exclude` and `include` API to save memory, and it cannot be accurately destroyed for different pages created by the same component.
If you have experienced mobile native development, you will not be troubled by this problem, because the model similar to NavigationController to manage each page is a stack structure, and the top page of the stack is destroyed when returning back.(The API is `push` and `pop` )
### Features
1. Automatically detect forward or backward
2. Automatically destroy the current page cache when routing back
3. Automatically create a new cache instance when routing forward, regardless of whether the component is cached or not
4. After refreshing the page, it is still able to accurately identify forward or backward
5. `replaceStay` whitelist helps cache pages when tab switching
6. `singleton` allows you to set a globally unique page instance
7. `sk-transition` allows you to use two animations to simulate [the native stacking effect](http://xinkai.wang/stack-keep-alive-sample/dist/)
### Usage
1. ```npm i -s stack-keep-alive``` | ```yarn add stack-keep-alive```
2. Replace the ``keep-alive`` component with ``stack-keep-alive`` (no need to import, registered global component)
```vue
```
3. When the app is initialized, use the StackKeepAlive plugin
```javascript
import StackKeepAlive from 'stack-keep-alive'
const app = Vue.createApp({})
app.use(StackKeepAlive)
...
```
### Configuration
#### 1. replace whitelist
When the tab bar is switched, some tab pages need to be retained, and these paths can be configured in replaceStay
```vue
```
#### 2. transition
For use with transition, you need to replace the transition component with the built-in sk-transition component.Use `name` and `back_name` to achieve two different animation effects. [Sameple Code here](https://github.com/Zippowxk/stack-keep-alive-sample/blob/main/src/App4.vue)
```vue
```
#### 3. singleton route
Sometimes it is expected that a component is only created once in the entire application life cycle, such as the common shopping cart page, in this case, use `singleton` to configure singleton route
```vue
```
### Sample code
[Sample code](https://github.com/Zippowxk/stack-keep-alive-sample)
[Online demo](http://xinkai.wang/stack-keep-alive-sample/dist/)
