vue3中使用keepAlive缓存路由组件不生效的情况记录
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
问题出现原因
在router.js
中注册路由:
{
path: '/template-allocation',
name: 'TemplateAllocation',
meta: { title: '风险任务详情', keepAlive: true },
component: () =>
import(
'../views/template-allocation/index.vue'
),
},
在router-view
中使用keepAlive
缓存组件:
<router-view v-slot="{ Component }" v-if="isShow">
<div class="child-view">
<KeepAlive :include="['TemplateAllocation']">
<component :is="Component"></component>
</KeepAlive>
</div>
</router-view>
最后发现并不生效,在大佬的帮助下,才找到原因:include
中使用的name
并不是注册的路由的name
!!!
而是组件本身的name
,记得在vue2
中的时候,export default
中有个属性可以声明name
,但是在vue3
中的setup
语法糖中,很少关注如何声明name
。
官网有这么一句话:
可是我自己在整理目录结构的时候,习惯将目录这样设置:/template-allocation/index.vue
,这样就会导致自动生成的name
变成了Index
!
就会导致keepAlice
的include
属性不生效了。
如何查找我们的组件名称呢?
这就要借助一个常用工具Vue Devtools
,如下:
从上图可以看到Index
就是我们的组件名字了。
setup
中如何设置组件的名字呢?
官网提供了一个defineOptions
,可以这么设置:
defineOptions({
name: 'TemplateAllocation'
})
从Vue Devtools
可以看到组件名字变成了TemplateAllocation
,如下:
以上就是本次的分享内容了,又踩了一个小坑。奉上当初提问的地址。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 天前 )
9e887079
[skip ci] 10 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)