泰安网站建设费用网站设计制作培训

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.cachedViewsreturn 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>

相关链接：

https://cn.vuejs.org/guide/built-ins/keep-alive.html

vue3 keep-alive include失效问题_<router-view> <template #default="{ component, rou-CSDN博客