翼度科技»论坛 编程开发 JavaScript 查看内容

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

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
问题出现原因

  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】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具