1.0.4 • Published 2 years ago
vue-keepalive-by-key v1.0.4
功能描述:
由于vue内置的keep-alive组件通过name值进行缓存,当存在一个组件被创建了多次,需要根据不同的key来缓存组件时就不好做了,因此魔改了一下内置的keep-alive组件,使其可通过设置唯一key来缓存同一组件。
适用版本:vue2.x、vue3.x
使用方法:
1.安装依赖
npm i vue-keepalive-by-key --save
2.引入组件
import KeepAlive from 'vue-keepalive-by-key'
3.注册组件(推荐全局注册以覆盖内置keep-alive组件)
Vue.component('keep-alive', KeepAlive)
4.vue2.x使用示例(注意给keep-alive包裹的组件设置唯一key,如$route.fullPath)
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
5.vue3.x使用示例(注意给keep-alive包裹的组件设置唯一key,从useRoute中取fullPath也可)
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="" />
</keep-alive>
</router-view>
6.其他使用与内置keep-alive组件一致
keep-alive组件文档链接:https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive