主要修改了 keepAlive 的缓存机制, 可以像 APP 那样前进刷新, 返回销毁, 支持动态路由和功能性路由
keepalive.gif
改变了
keepAlive的缓存机制, 可以像 APP 那样前进重建,返回销毁
不过目前仅仅用于Page级别, 也就是一级路由, 其他级路由似乎没有需要
原本的keepAlive默认是以componentName来做缓存的 key
当然如果有vnode.key的话则会使用vnode.key, 所以网上很多通过$route.fullPath当作 key
可以实现params/query的变更新建组件, 但是无法做到返回销毁
如果使用$destroy()去手动销毁, 但是keepAlive里面还是存在缓存标记
导致从 3 级路由返回到 2 级路由时拿缓存的instance是失效的, 进而导致重建
所以通过Page前进返回行为分析, 总结出 key 的生成规则
解决的痛点
- 子路由的更新和父级路由无关, 所以一级路由的缓存 key 是命中路由的父一级路由相关, 目前是父路由的 path + 父子路由相同的 params
- 还有就是自己功能性路由的支持
- 比如使用支持返回键的 imgsViewer, 需要 history 压栈而不触发 forward/backward 事件, 所以提供了 ignorePaths 参数
- 比如子路由不使用 router-view 来渲染, 而是使用 view-pager 来自行控制,
支持左右滑动切换, 如果 view-pager 的页面状态是需要保存到 url, 则需要一级路由的一个动态路由占位符, 充当子路由, 所以提供了 ignoreParams 参数
- 比如子路由不使用 router-view 来渲染, 而是使用 view-pager 来自行控制,
Props
| 参数 | 类型 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|
| ignorePaths | Array, String, RegExp | 忽略符合条件的 URL，不压栈 | ||
| ignoreParams | Array, String | 忽略动态路由参数，不参与 key 的构成 |
Events
| 事件名 | 参数 | 描述 |
|---|---|---|
| init | Info | 组件初始化的时候 |
| forward | Info | 路由前进的时候 |
| replace | Info | 路由替换的时候 |
| backward | Info | 路由返回的时候 |
Event Params: Info
| 参数 | 类型 | 描述 |
|---|---|---|
| fromPath | String | 变化前 path |
| nextPath | String | 变化后 path |
| fromRouterKey | String | 变化前 key |
| nextRouterKey | String | 变化后 key |
注: vc-keep-alive 将会把历史栈储存在 SessionStorage 的__VCKEEPALIVE__字段里
Demo Code
npm install vc-keep-alive
<template>
<div id="app" :class="pageAct">
<transition name="page-slide">
<vc-keep-alive
:ignorePaths="ignorePaths"
:ignoreParams="ignoreParams"
@init="log('init', $event)"
@forward="log('forward', $event)"
@replace="log('replace', $event)"
@backward="log('backward', $event)"
>
<router-view />
</vc-keep-alive>
</transition>
</div>
</template>
<script>
import Vue from 'vue';
import VcKeepAlive from 'vc-keep-alive';
Vue.use(VcKeepAlive);
export default {
data() {
return {
pageAct: '',
ignorePaths: ['popup='],
ignoreParams: ['pagerTab']
};
},
methods: {
log(act, args) {
console.log(act, args);
this.pageAct = 'page-' + act;
}
}
};
</script>
TODO
License
MIT 一起来扣细节~
