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不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

VScode中配置ESlint+Prettier详细步骤(附图文介绍)
这篇文章主要介绍了VScode中配置ESlint+Prettier详细步骤,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-12-12
解决v-for中使用v-if或者v-bind:class失效的问题
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue生产和开发环境如何切换及过滤器的使用
本文主要介绍了Vue生产、开发环境如何切换及过滤器的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue-Router路由守卫详的细用法教程
在Vue.js应用中,Vue-Router是一个非常重要的插件,它允许我们实现页面间的导航,然而,仅仅实现导航是不够的,我们还需要在导航的不同阶段进行各种操作,本文将结合实际案例,详细介绍Vue-Router路由守卫的用法,需要的朋友可以参考下
2024-12-12
Vue3 数据总线的实现
在Vue3中,可以使用mitt实现事件总线,mitt是一个轻量级的事件发布/订阅库,核心功能包括发布事件、订阅事件和取消订阅,下面就来介绍一下如何使用,感兴趣的可以了解一下
2026-04-04
前端项目常用的三个Skills总结(Vue、React与UI核心Skills)
最近一种新概念在前端社区中受到关注,Skills这个概念很快被React和Vue社区接受,并引发了关于AI编程方式的新思考,这篇文章主要介绍了前端项目常用的三个Skills的相关资料,分别是Vue、React与UI核心Skills,需要的朋友可以参考下
2026-05-05
Vue编程三部曲之将template编译成AST示例详解
这篇文章主要为大家介绍了Vue编程三部曲之将template编译成AST示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue实现滑动超出指定距离回顶部功能
这篇文章主要为大家详细介绍了vue实现滑动超出指定距离回顶部功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue3中form表单层级嵌套问题的解决详解
这篇文章主要为大家详细介绍了vue3中form表单层级嵌套问题的相关解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-05-05
在vue中实现简单页面逆传值的方法
vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性
2017-11-11