0.1.4 • Published 2 years ago
keepalive-extend v0.1.4
keepalive-extend
Brief Introduction
- Compatible with vue2.x API native keepalive component
- Can decide whether to refresh the matching route page according to the rules
- This component depends on Vue-router. Please ensure that Vue router is installed
Install
# npm
npm install keepalive-extend -S
# or yarn
yarn add keepalive-extend -S
How to use
import Vue from 'vue'
import KeepaliveExtend from 'keepalive-extend'
Vue.use(KeepaliveExtend)
Component API
<keepalive-extend
unique-key="app"
:rules="{
page1: {refresh: 'page2', notRefresh: 'page3'}
}"
:keep-active="false"
include="page1"
exclude="page1"
max="2"
>
<router-view />
</keepalive-extend>
API
property | description | type | required |
---|---|---|---|
unique-key | unique key value | string | true |
keep-active | whether to persistent cache | boolean | false |
rules | whether the target page refreshes the rule | object | false |
include | consistent with that of keep-alive | string | false |
exclude | consistent with that of keep-alive | string | false |
max | consistent with that of keep-alive | string or number | false |
Rules Api
- Vue router must be installed to use rules
- Enter page1 page from Page2 or Page3 page, and page1 re renders
rules = {
page1: {
refresh: 'page2,page3',
// notRefresh: 'page2,page3'
}
}
rules = {
page1: {
refresh: /paeg2|page3/,
// notRefresh: /paeg2|page3/
}
}
rules = {
page1: {
refresh: ['page2', /page3/],
// notRefresh: ['page2', /page3/]
# or
refresh: [['page2', /page3/]]
// notRefresh: [['page2', /page3/]]
}
}
- After opening, the page without configuration rules will be re rendered every time
rules = {
page1: {refresh: 'page2'},
othersCachedClean: true // Other pages that are not page1 pages are re rendered every time
}
Example
- The details page enters the list page, and the list page does not refresh
- The non details page enters the list page, and the list page refreshes
<keepalive-extend
unique-key="app"
include="list"
:rules="{
list: {
notRefresh: 'detail',
refresh: /[^detail]/
}
}"
>
<router-view />
</keepalive-extend>
Remind
- The component name must be consistent with the name in the routing configuration
# ./src/page1.vue
<script>
export default {
name: 'page1',
...
}
</script>
# router.js
const routes = [
{
path: '/',
name: 'page1',
component: () => import('./src/page1.vue')
}
...
]
- The name value of the page where the nested keepalive-extend is located must be configured in the exclude of the parent keepalive-extend
- For the nested keepalive-extend page, if the slot needs to be permanently cached, turn on keep-active
- Root keepalive-extend component does not need to enable keep-active