1.0.4 • Published 2 years ago

vue-keepalive-by-key v1.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

功能描述:

由于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

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago