首页 > 其他分享 >vue3 keepalive 失效

vue3 keepalive 失效

时间:2024-03-12 13:33:48浏览次数:33  
标签:插槽 router alive keep vue3 组件 失效 keepalive view

好久没更新博客了,重复拧螺丝

keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖

我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题

 之前用了keep-alive没有用v-slot

因为router-view就是一个单独的组件,他的本质并不是使用url对应的组件代替他的位置,而是它的内部有一个插槽存在,当我们没有使用这个插槽时,他会默认的插入url对应的组件,所以其实url对应的组件并不是代替他的位置,而是作为他的子组件放入了插槽中,所以keep-alive没效果并不是因为组件太多,因为如果像动态组件一样,根据不同情况变成不同的组件,那么当变成组件名匹配的组件时,那么keep-alive反倒会生效,正式因为router-view从来没变过,所以我们包裹它不会有任何效果,而且对其内部的子组件没有任何意义,即使我们使用include属性,keep-alive也只是对router-view进行了缓存,而其内部的子组件,依旧不会有任何反应

这其实就是在提醒我们,使用router-view中的插槽完成keep-alive包裹,router-view中的插槽是作用域插槽,其内部向外传递了一个对象,对象内部包括了当前url对应的route对象,和组件实例对象,通过组件实例对象,我们就可以在自己的代码中实现组件的渲染,然后就可以轻松的写上keep-view,代码就如上图了,就可以了

虽然我不懂props.Component是如何产生作用的

参考如下博客:https://blog.csdn.net/dxh9231028/article/details/131423235

 

标签:插槽,router,alive,keep,vue3,组件,失效,keepalive,view
From: https://www.cnblogs.com/qingcui277/p/18068108

相关文章

  • Vue3自定义指令实现权限控制
    使用Pinia(Vue.js的轻量级状态管理库,是Vuex的替代品)来管理用户权限,并结合自定义指令控制元素的显隐。步骤操作如下:1、安装Pinia:npminstallpinia或yarnaddpinia解释:安装Pinia库,这是一个轻量级的状态管理库,适用于Vue3。2、创建PiniaStore://stores/user.jsimport{......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......
  • vue3 父子组件间通讯
    1、父组件向子组件传值父组件<fitSteps:stepActive="stepActive"><div>插槽信息</div>      <van-buttontype="primary"@click="FatherClick">下一步</van-button></fitSteps>conststepActive=ref......
  • Java登陆第三十四天——使用Vite创建工程化的Vue3项目
    VueVue是基于标准HTML、CSS和JavaScript构建的前端框架,可以更高效地开发前端页面。ViteVite是Vue团队开发的项目管理工具。Maven的主要功能引入依赖项目管理使用Maven可以工程化的管理后端代码。npm的主要功能:引入依赖vite的主要功能:项目管理使用npm+vit......
  • JeecgBoot Vue3前端项目性能优化&按需加载方案
    JeecgBootvue3前端项目在3.5.5版本之前,的确存在很严重的性能问题,大家可以参考以下文档进行升级。按需加载改造方法1、全局注册地方去掉2、组件改成异步注册3、用不到的大组件可以删掉【精简项目方案】大组件1、富文本tinyme2、Markdown3、CodeMirror4、地图数据......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • Vue3学习(二十三)- 保存文档内容正常显示
    写在前面情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。现在时间:内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰,enjoy自己独处的时间!保存内容显示1、任务拆解读取已保存内容将读取内容在富文本里显示2、读取已保存内容这个很好......
  • C++中不同容器下迭代器失效的情况
    C++中不同容器下迭代器失效的情况迭代器失效分三种情况考虑,也是分三种数据结构考虑,分别为数组型,链表型,树型数据结构。数组型数据结构:该数据结构的元素是分配在连续的内存中,insert和erase操作,都会使得删除点和插入点之后的元素挪位置,所以,插入点和删除掉之后的迭代器全部失效,也就......
  • vue3开发文档
    技术要求TypeScriptVue31、用Vue+Vue-Router做一个展示网站。网站按页面划分模块,每个页面按section(部分)再划分模块。培养自己的模块化思想。2、用Vue+Vue-Router+Axios做一个带请求的网站。把请求结果放在页面上展示出来。锻炼请求接口的能力,了解前后端分离思想。3、用Vue+Vu......