Vue Router Keep-alive Helper 是Vue.js项目中页面缓存自动管理工具，仅需一行配置代码即可使用。
English | 简体中文
在使用Vue.js搭配vue-router开发单页面应用时，经常使用keep-alive组件缓存浏览过的页面来提升用户体验，目前提供了如下配置方式来动态管理缓存
include - 只有名称匹配的组件会被缓存。
exclude - 任何名称匹配的组件都不会被缓存。
max - 最多可以缓存多少组件实例。
但是这只能处理简单状况，无法应对复杂状况，比如：
- 如何在返回上一页面时，销毁当前页面缓存
- 如何缓存多个使用相同组件的页面，并且有针对性的销毁
- 自动侦测前进或后退
- 后退时自动销毁当前页面缓存
- 前进时自动创建新的缓存实例，不管该组件是否被缓存过
- 刷新页面后，仍能够准确识别前进或后退
replaceStay白名单帮助在tab切换时缓存页面
npm i -s vue-router-keep-alive-helper- 将所有页面设置为keep-alive
...
<keep-alive>
<router-view/>
</keep-alive>
...- 在vue-router初始化时 添加helper
import createHelper from 'vue-router-keep-alive-helper'
import Vue from 'vue'
const router = new VueRouter({routes})
createHelper({Vue, router});
...- replace白名单
在tab栏切换时，需要留存某些tab页面，可以在replaceStay中配置这些路径
createHelper({Vue, router, replaceStay:["/home","/cart","/mine"]});- 支持transition组件，支持模拟原生前进后退动画
- 支持非全局keep-alive路由
- 增加打包脚本
- 不支持
<router-link/>组件
欢迎添加微信 **OmniBug **探讨交流，Email: [email protected]
 wangxinkai 💻 📖 |
 kamilic 💻 🤔 |