vue,vue3 keepalive没有效果，无法缓存页面include无效，keep-alive

news2025/2/23 4:11:40

keepalive没有效果，无法缓存页面？

问题大概是组件的name值不对应，vue2修改组件文件的name值，vue3保持组件文件名称和路由页面配置的name一致就可以了，如果vue3不想保持一致，必须手动在文件后面添加export...如下。

vue3不修改文件名称，但实现效果：

核心代码和全部代码：

<script>
export default {
  name: 'ppidPage'
}
</script>

<template>
  <PpidConfig />
</template>
<script setup>
import { onMounted } from 'vue'
import PpidConfig from './PpidConfig.vue'
import { usePpidStore } from '@/store/operation/ppid.js'
const ppidStore = usePpidStore()
onMounted(async () => {
  await ppidStore.getAllUnits()
})
</script>
<script>
export default {
  name: 'ppidPage'
}
</script>

keepalive文件：

<template>
  <section class="app-main">
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="key" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

<script setup>
import { computed } from 'vue'
import { useTagsViewStore } from '@/store/tagsView'
import { useRoute } from 'vue-router';
const route = useRoute();
const tagsViewStore = useTagsViewStore()

// 缓存的路由组件名称列表
const cachedViews = computed(() => {
  console.log('当前缓存页面:', tagsViewStore.cachedViews)
  // return tagsViewStore.cachedViews
  return tagsViewStore.cachedViews.filter(item => {
    if (route.name == item && !route.meta.keepAlive) {  //keepAlive为false不缓存
      return false;
    } else {
      return true;
    }
  })
})
</script>

<style scoped></style>

router.js页面配置：

{
      path: 'ppid-config',
      permission: 'Operation.PPID',
      component: () => import('@/views/operation/ppid/ppidPage.vue'),
      name: 'ppidPage',
      meta: {
        title: t('route.operation.ppidConfig'),
        keepAlive: true
      }
    },

vue3 setup组件的name值无法修改，最终的name值会跟文件名称生成一致的。

vue2中可以动态修改组件name值，如下位置：

<script lang="ts">
export default {
  name: 'User',    //修改组件的name值
  data(){
    return {
    }
  }
}
</script>

vue官网文档说明：

其他

存在transition组件的写法：

<router-view v-slot="{ Component }" v-show="$route.meta.keepAlive">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="key" />
        </keep-alive>
      </transition>
    </router-view>
    <router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
      <transition name="fade-transform" mode="out-in">
        <component :is="Component" :key="key" />
      </transition>
    </router-view>