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

相关推荐
abigale0314 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者33 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile37 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399740 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码