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

更新时间：2024年06月27日 10:59:42 作者：weixin_40451732

这篇文章主要介绍了vue3中使用keepAlive缓存路由组件不生效的问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

问题出现原因

在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，如下：

在这里插入图片描述

以上就是本次的分享内容了，又踩了一个小坑。奉上当初提问的地址。

到此这篇关于vue3中使用keepAlive缓存路由组件不生效的情况记录的文章就介绍到这了,更多相关vue keepAlive不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用Vue编写一个日期选择器
这篇文章主要为大家详细介绍了如何使用Vue编写一个简单的日期选择器,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue中使用极验验证码的方法（附demo）
这篇文章主要介绍了vue中使用极验验证码的方法（附demo）本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
通过vue手动封装on、emit、off的代码详解
这篇文章主要介绍了通过vue手动封装on，emit，off的代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
bmob js-sdk 在vue中的使用教程
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。下面通过本文给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧
2018-01-01
element-ui中样式覆盖问题的方法总结
我们在使用element-ui的时候经常会遇到需要修改组件默认样式,下面这篇文章主要给大家介绍了关于element-ui中样式覆盖问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
关于iview按需引用后使用this.$Modal报错的解决
这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue下拉菜单组件（含搜索）的实现代码
这篇文章主要介绍了vue下拉菜单组件（含搜索）的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
VueJs使用Amaze ui调整列表和内容页面
这篇文章主要介绍了VueJs 填坑日记之使用Amaze ui调整列表和内容页面,需要的朋友可以参考下
2017-11-11
Vue-CLI与Vuex使用方法实例分析
这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
2020-01-01
Vuex模块化实现待办事项的状态管理
本文主要介绍了Vuex模块化实现待办事项的状态管理的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03