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

相关推荐
大怪v32 分钟前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls33 分钟前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友39 分钟前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵1 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda1 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机2 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安2 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam3 小时前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~3 小时前
phpstudy .htaccess 文件内容
java·开发语言·前端
nueroamazing3 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt