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中resetFields()使用注意事项
这篇文章主要介绍了浅谈vue中resetFields()使用注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解vue 兼容IE报错解决方案
这篇文章主要介绍了详解vue 兼容IE报错解决方案，详细的介绍了几种原因及其解决方案，非常具有实用价值，需要的朋友可以参考下
2018-12-12
使用Vue开发登录页面的完整指南
Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面,在这个"vue网页登录界面"的示例中,我们探讨的是如何使用Vue.js创建一个简单的登录页面,感兴趣的小伙伴跟着小编一起来看看吧
2025-04-04
Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vite结合whistle实现一劳永逸开发环境代理方案
这篇文章主要为大家介绍了Vite结合whistle实现一劳永逸开发环境代理方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue 项目地址去掉 #的方法
vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
2018-10-10
Vue3自定义指令语法图文详解
这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-09-09
Vue 浏览器本地存储的问题小结
这篇文章主要介绍了Vue 浏览器本地存储,LocalStorage 和 SessionStorage 统称为 WebStorage，存储大小一般支持5mb左右，但是不同的浏览器也有区别，具体内容介绍跟随小编一起看看吧
2022-04-04
Vue3+axios+Mock.js实现登录功能的示例代码
本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
详解在vue-cli项目中使用mockjs(请求数据删除数据)
本篇文章主要介绍了在vue-cli项目中使用mockjs(请求数据删除数据)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10