vue3 keep-alive include失效问题

本文主要是介绍vue3 keep-alive include失效问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在使用vue3 keep-alive时，发现并没有起作用, 代码如下：

<template><div class="app-main"><router-view v-slot="{ Component }"><keep-alive :include="cachedViews && cachedViews.map((x:any) => x.name)"><component :is="Component" /></keep-alive></router-view></div>
</template><script lang="ts" setup>
import { useLayoutStore } from '../../../stores';
import { storeToRefs } from 'pinia';
const store = useLayoutStore();
const { cachedViews } = storeToRefs(store);
</script><style lang="scss" scoped>
.app-main {padding: 10px;height: calc(100vh - 90px);width: 100%;
}
</style>

这里的include绑定的是路由名称的数组，看着没什么问题，就是不起作用。

原来vue3的setup无法组件命名，keep-alive include必须要组件命名

所以在需要添加缓存的组件中，添加：

<script lang="ts">
export default { name: 'charts1' };
</script>

这里的charts1就是该组件名，对应路由的name也是charts1。

参考地址：https://blog.csdn.net/guang_sszbs/article/details/123236594

 

这篇关于vue3 keep-alive include失效问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---