基于 vue 的缓存组件，可以对页面进行缓存控制，
基于Vue的缓存组件，可以对页面进行缓存控制，适合用在带标签页的后台管理系统中。
解决问题：
切换标签页时，不需要刷新页面 关闭标签页后，重新打开，需要刷新页面相比 keep-alive + vuex 解决方案有以下优势：
不需要依赖vuex 可用在嵌套路由中（在通过路由生成菜单的场景下非常实用） 安装npm i dynamic-keep-alive -S
使用
main.js：
import Vue from 'vue'
import DynamicKeepAlive from 'dynamic-keep-alive'
Vue.use(DynamicKeepAlive)
router-view中：
<dynamic-keep-alive>
<router-view/>
</dynamic-keep-alive>
注意：如果使用的是嵌套路由，则所有router-view都需要包裹<dynamic-keep-alive>
页面组件中：
<template>
<div>商品列表页面</div>
</template>
<script>
export default {
name: 'goods-list', // 添加name，如果不需要缓存，则不添加
noCache: true // 如果不需要缓存，可以将noCache设置为true，此选项是为了必须加name但又不需要缓存的页面准备
}
</script>
至此所有加了name属性的页面第一次打开时会刷新，之后一直缓存，缓存需要手动调用removeCache()清除，或者达到最大缓存数后自动清除。
清除缓存可以在合适的时机清除缓存，如：
关闭标签页 跳转详情页前通过调用以下方法清除缓存：
import { remove } from 'dynamic-keep-alive'
// 清除单个
remove('goods-list')
// 清除多个
remove(['goods-list', 'goods-detail'])
API
options
| 属性 | 类型 | 说明 |
|---|---|---|
| max | Number | 设置最大缓存个数，默认20，当达到最大缓存后，会清除最先缓存的组件。 |
| exclude | Array | 添加到此选项的页面均不缓存 |
| noCache | Boolean | 为true时，所以页面均不缓存 |
Vue.use(DynamicKeepAlive, {
max: 20,
exclude: ['goods-list'],
noCache: true
})
methods
| 属性 | 参数类型 | 说明 |
|---|---|---|
| remove | String | Array | 清除指定name组件的缓存 |
| clear | - | 清除所有缓存 |
| getInstance | String | 根据name获取被缓存的组件实例 |
git clone https://github.com/HuangZhaoPing/dynamic-keep-alive.git
npm install
npm run example
项目地址
https://github.com/HuangZhaoPing/dynamic-keep-alive
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
