vue3中使用keepAlive缓存路由组件不生效的问题解决

木子雨葭

问题出现原因

在

1. router.js

复制代码

中注册路由：

1. {
   
2.     path: '/template-allocation',
   
3.     name: 'TemplateAllocation',
   
4.     meta: { title: '风险任务详情', keepAlive: true },
   
5.     component: () =>
   
6.       import(
   
7.         '../views/template-allocation/index.vue'
   
8.       ),
   
9.   },

复制代码

在

1. router-view

复制代码

中使用

1. keepAlive

复制代码

缓存组件：

1. <router-view v-slot="{ Component }" v-if="isShow">
   
2.   <div class="child-view">
   
3.     <KeepAlive :include="['TemplateAllocation']">
   
4.       <component :is="Component"></component>
   
5.     </KeepAlive>
   
6.   </div>
   
7. </router-view>

复制代码

最后发现并不生效，在大佬的帮助下，才找到原因：

1. include

复制代码

中使用的

1. name

复制代码

并不是注册的路由的

1. name

复制代码

！！！
而是组件本身的

1. name

复制代码

，记得在

1. vue2

复制代码

中的时候，

1. export default

复制代码

中有个属性可以声明

1. name

复制代码

，但是在

1. vue3

复制代码

中的

1. setup

复制代码

语法糖中，很少关注如何声明

1. name

复制代码

。
官网有这么一句话：

可是我自己在整理目录结构的时候，习惯将目录这样设置：

1. /template-allocation/index.vue

复制代码

，这样就会导致自动生成的

1. name

复制代码

变成了

1. Index

复制代码

!
就会导致

1. keepAlice

复制代码

的

1. include

复制代码

属性不生效了。
如何查找我们的组件名称呢?

这就要借助一个常用工具

1. Vue Devtools

复制代码

，如下：

从上图可以看到

1. Index

复制代码

就是我们的组件名字了。

1. setup

复制代码

中如何设置组件的名字呢？
官网提供了一个

1. defineOptions

复制代码

，可以这么设置：

1. defineOptions({
   
2.   name: 'TemplateAllocation'
   
3. })

复制代码

从

1. Vue Devtools

复制代码

可以看到组件名字变成了

1. TemplateAllocation

复制代码

，如下：

以上就是本次的分享内容了，又踩了一个小坑。奉上当初提问的地址。
到此这篇关于vue3中使用keepAlive缓存路由组件不生效的情况记录的文章就介绍到这了,更多相关vue keepAlive不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323383ws5.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！