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

相关推荐
郑板桥301 天前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董1 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon1 天前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii1 天前
JAVA Web —— A / 网页开发基础
前端
gnip1 天前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 天前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人1 天前
Firefox自定义备忘
前端·firefox
乖女子@@@1 天前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育1 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘1 天前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向