vue 使子组件不被 keep-alive 缓存
时间: 2023-08-24 16:07:05 浏览: 38
可以通过在子组件中加入一个唯一的key属性来解决:
```
<keep-alive>
<component :is="currentTabComponent" :key="currentTabComponent"></component>
</keep-alive>
```
在子组件中加入一个唯一的key属性,每次切换组件时都会重新渲染。
相关问题
vue 使某个组件不被 keep-alive 缓存
可以在组件标签上加上一个属性,比如 `no-cache`,然后在 `keep-alive` 组件的 `exclude` 属性中排除这个组件。
示例代码:
```vue
<template>
<div>
<keep-alive :exclude="excludeComponents">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {
excludeComponents: []
};
},
created() {
this.$router.beforeEach((to, from, next) => {
const exclude = to.matched.some(record => record.meta.noCache);
if (exclude) {
this.excludeComponents.push(to.name);
} else {
const index = this.excludeComponents.indexOf(to.name);
if (index !== -1) {
this.excludeComponents.splice(index, 1);
}
}
next();
});
}
};
</script>
```
在需要禁用缓存的组件中,添加 `noCache: true` 的 meta 信息:
```javascript
{
path: '/example',
name: 'Example',
component: Example,
meta: {
noCache: true
}
}
```
然后在组件标签上添加 `no-cache` 属性即可:
```vue
<template>
<div v-if="!$route.meta.noCache">
<!-- 不禁用缓存的代码 -->
</div>
<div v-else>
<!-- 禁用缓存的代码 -->
</div>
</template>
```
vue3设置keep-alive缓存组件
在Vue3中,设置keep-alive缓存组件非常简单,只需要将要缓存的组件使用<keep-alive>标签包裹即可。例如:
```html
<template>
<div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
```
上述代码中,<router-view>是Vue Router提供的路由组件,使用<keep-alive>标签包裹<router-view>,就可以实现对该组件的缓存。
如果需要动态控制缓存哪些组件,可以通过在<keep-alive>标签上使用include和exclude属性来实现。例如:
```html
<template>
<div>
<keep-alive :include="cacheList">
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {
cacheList: ['Home', 'About'] // 要缓存的组件名称列表
}
}
}
</script>
```
上述代码中,通过在<keep-alive>标签上使用:include属性,并将要缓存的组件名称列表传入,就可以动态控制缓存哪些组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)