Vue78-缓存路由组件

已于 2024-06-22 15:55:08 修改
阅读量316 收藏
点赞数 1
分类专栏： VUE2 文章标签： 前端 vue.js
于 2024-06-22 15:51:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31532983/article/details/139883277
版权

一、需求 

路由切走的时候，组件会被销毁，路由切回来，组件被挂载！

需要：路由切走的时候，组件不会被销毁。

二、代码实现

若是不加include属性，则在<router-view>里面展示的路由，都不会被销毁！来者不拒！

include里面的是组件名！

缓存多个：用数组格式

注意：:include!

三、小结

ruleslol
关注
专栏目录
Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
共同学习，共同成长
06-24 2152
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
详解vue-template-admin三级路由无法缓存的解决方案
11-21
我们可以遍历`matched`，将所有需要缓存的路由组件的`name`添加到`cachedViews`数组中，从而确保二级路由组件也能被正确缓存。 然而，这种方法可能引发另一个问题：当关闭某个三级路由的组件时，我们需要决定是否...
vue--vuerouter缓存路由组件
qq_43470725的博客
06-26 425
vueroutet
Vue核心技术-38,vue-router-缓存路由组件
BraveWangDev
08-25 3214
一,前言 一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间 如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的 那么可以在组件第一次加载时,将组件对象缓存起来 当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验 如:Tab页制作的各种状态的订单列表切换 当然,这取决于你的数据是否需要较高的实时性 二,验证 使用上一篇的例...
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 2340
vue2进阶篇：vue-router之缓存路由组件
Vue Router 路由动态缓存组件
猫老板的豆
04-13 2936
Vue Router 允许你缓存路由组件，这样在用户导航回之前的页面时，组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例，而不是销毁它们。当组件在包裹下被切换时，它的状态（包括数据、DOM 结构等）都会被保留，以便在下次重新显示时能够恢复之前的状态，而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。
Vue-router缓存路由组件
李公子的博客
08-15 1238
缓存路由组件 作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include="News"> <router-view></router-view> </keep-alive> 通过<keep-alive> ··· </keep-alive> 标签实现 标签内的组件会被缓存起来 切换之后不会被销毁 include属性可以指定需要缓存的组件 不会把所有组件都缓存 ...
vue中的keep-alive缓存组件
m0_64081601的博客
07-23 1078
所以当我们从A页面跳转到B页面的时候，A页面已经被销毁了，假如在跳转之前我们对A页面进行了一个操作，接着我们从B页面再返回到A页面，发现原先在A页面上的操作没有了，但是假如我们想保存A页面原来的操作，我们应该怎么做呢？使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，避免组件被返回后浏览器对它进行再度渲染，当组件在 内被切换，它的。然后在App.vue中使用keep-alive包裹使用路由显示的入口**()**任何名称匹配的组件都不会被缓存。只有名称匹配的组件会被缓存。
vue-router路由缓存
二七二十七的博客
07-27 2617
路由缓存通过``标签中的include属性实现，指定include属性的属性值为需要进行缓存的组件名
VUE3-------路由缓存
weixin_45155276的博客
06-01 2743
VUE3-------路由缓存 文章目录VUE3-------路由缓存问题一、vue3中路由的使用setup中使用route或者是router实例二、解决问题1.使用watch监听解决路由缓存问题1.技术实现：2.代码落地：2.使用key去解决路由缓存问题1.使用：找到路由出口 加一个key属性2.基础原理3.使用方法选择 问题 路由缓存问题： path不变的情况下 vue-router会选择就地复用组件 导致组件不会重新渲染 钩子函数不会再次执行 ajax请求不会再次发起 提示：以下是本篇
Vue用keep-alive缓存组件
苦作舟的空城机
04-14 3461
keep-alive 用途：对于动态切换的组件进行包裹，使其能够进行缓存，而不是销毁掉后重新创建 在系统开发中，界面上有时会需要对某一块内容进行切换，如果这一部分的内容是几个组件频繁动态切换，为了提高效率，可以使用keep-alive包裹它们。 keep-alive是一个抽象组件，本身不会渲染一个DOM元素，也不会出现在组件的组件链中。（这与transition动画组件类似） 实例 <template> <div class='keepAlives'> &
vue里如何主动销毁keep-alive缓存的组件
10-17
在Vue.js框架中，`keep-alive`是用于缓存组件状态的一个功能，它可以保持组件状态，避免重新渲染，提高应用性能。然而，在某些场景下，我们需要在组件不再可见时主动销毁它，以避免内存泄漏或资源浪费。本文将详细...
vue keep-alive 动态删除组件缓存的例子
12-13
业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。 实现： 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候，更新store的数组，把将要...
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 348
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 203
vxe-grid新增空行，并且定位到空行位置。
前端react常见面试题目（basic)
警警的博客
11-02 1082
react常见面试题目（basic)
[]简单无废话]前端知识点(HTML+CSS)---IFC
2302_80171619的博客
11-02 225
IFC（Inline Formatting Context，行内格式化上下文）是指在 CSS 中控制行内元素如何布局的一个环境。它主要用于处理行内元素（如 span , a 等）在文本流中的位置和排列方式。IFC 会影响行内盒子的布局，包括换行、行高和文本对齐等。
vue种ref跟reactive的区别?
renqq001的博客
11-07 481
vue种ref跟reactive的区别?
前端md5加密
最新发布
Xiang_Gong_Ya_的博客
11-07 172
md5Pwd（加密后的数据）
深入理解Vue keep-alive：动态组件与路由缓存
在`vue-router`中，`keep-alive`通常用于缓存路由组件： ```html <keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view> </keep-alive> ``` 这里，`whiteList`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值