keep-alive的exclue属性

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量136 收藏
点赞数
分类专栏： vue相关 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46208009/article/details/114357358
版权

项目中路由某个页面不需要使用keep-alive

实现方式

  1. 采用keep-alive的exclue属性 （失败）
  2. 采用beforeRouteEnter在next方法中调用初始化数据的函数（实现业务效果）

在空余时间想起使用keep-alive的exclue属性失效的问题，查看了一下百度，发现了不生效的原因
原因：exclue属性优先支持的name，并不是指路由的name， 而是指.vue文件中，script中默认导出的对象中的name属性

胡占林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 1831
A页面 B页面：列表页面 C页面：详情页面 需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据 代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...
HLAProfiler:使用k-mers调用RNA测序数据中的HLA等位基因
04-29
perl ~/opt/scripts/HLAProfiler/bin/HLAProfiler.pl build -t path/to/transcript.fa.gz -g /path/to/transcript_annotations.gtf.gz -e /path/to/hla_exclue_regions.bed -r /path/to/IMGT_reference.fasta -cwd ...
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 4659
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
kepp-alive的作用?keep-alive的属性?路由元信息？白名单黑名单?keep-alive的钩子函数
weixin_61434407的博客
12-29 918
keep-alive它自身不会渲染一个dom元素，也不会出现在父组件中，作为标签使用包裹在需要缓存的组件外 路由元信息 如果要缓存部分页面可以使用路由元信息 <keep-alive> <router-view v-if="!$route.meta.noneedCache"/> </keep-alive> <router-view v-if="$route.meta.noneedCache"></router-view> 在路由
Vue:keep-alive标签设置exclude无效解决方法
q879936814的博客
04-27 1801
最近做项目遇到了给keep-alive标签设置了exclude，但点进去组件还是保存着之前的状态 <keep-alive exclude="Detail"> <router-view></router-view> </keep-alive> 然而路由设置name了 { path: '/detail:iid', n...
vue中keep-alive原理
混世小妲己
06-26 1万+
参考： 请至少看第二个链接!!!!! https://segmentfault.com/q/1010000011537852 https://segmentfault.com/a/1190000011978825（关于代码解读的部分） keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，...
debugview使用
11-15
include 表示调试信息包含的字符串，exclue 表示不包含的字符串，多个字符串使用“;”号隔开。 2. 保存日志信息 DebugView 也提供了保存日志信息的功能。在工具栏中选择 File→Save 按钮，弹出保存对话框，输入...
粗浅了解keep-alive组件实现原理
pobu168的博客
11-01 894
首先说明文中大部分思想来自这里：传送门，这篇文章只是摘要性整理。 keep-alive组件缓存基于VNode节点而不是直接存储DOM结构。它将满足条件（include与exclude）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。 1、DOM虚拟化及销毁 created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。 cr...
vue-router 路由导航中keep-alive
weixin_45677987的博客
06-23 402
1: keep-alive: 的使用 组件的内部的状态是没有被保留的。 如果每一次组件不想被重新创建, 把组建的内部的状态的保留下来。 就需要使用keep-alive 2: keep-alive: 就是Vue 内置的一个组件, 可以使被包含组件保留状态, 或者避免重新渲染。 3: router-view: 也是一个组件, 如果直接被包含到keep-alive 里边, 所有的路径匹配到的视图组件都会被缓存起来。 切换路由的时候, 对应的单个组件就会被频繁的创建和销毁。 created() {};.
为什么＜keep-alive＞组件的exclude或include属性设置无效
weixin_52087266的博客
07-14 2299
踩坑组件 exclude/include 属性设置无效
keep-alive 页面缓存详解
小贤笔记
10-13 2845
文章摘自 你蠢哭我咯 - CSDN vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 缓存整个页面或组件 &lt;keep-alive&gt; &lt;component&gt; &lt;!-- 组件将被缓存 --&gt; &lt;/component&gt; &lt;/k...
vue中keep-alive两个属性的用法及注意问题
阡*-*陌的博客
12-13 1984
在使用keep-alive时我们只想让其中一个组件缓存，另一个不会缓存。怎么办呢？？？ 因此为keep-alive提供了两个属性： include 值为字符串或者正则表达式匹配的组件name会被缓存。 exclude 值为字符串或正则表达式匹配的组件name不会被缓存。 exclude属性 比 include属性优先级更高。 请注意： include和exclude两个属性匹配的是组件中的name名称，而不是路由中的name名称。 <keep-alive include="Hom
keep-alive用法（include、exclude、max）
热门推荐
yimeichengxuyuan的博客
10-13 2万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1.用处2.属性3.介绍4.使用使用中可能遇到的问题 1.用处 主要用于保留组件状态或避免重新渲染。 2.属性 include 字符串，数组或正则表达式。只有名称匹配的组件会被缓存。 exclude 字符串，数组或正则表达式。任何名称匹配的组件都不会缓存。 max 数字。最多可以缓存多少组件实例。 3.介绍 < keep-alive > 包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。 < ke
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
朝阳39的博客
01-20 6855
添加页面缓存 src/App.vue 使用keep-alive组件包裹，则再次进入页面时，会使用缓存中的组件，不会重新渲染（不再执行mounted及之前的生命周期中的代码），用于保存组件的原始状态（所有变量的值保持最终状态不变） <keep-alive> <router-view></router-view> </keep-alive> 清除页面缓存 若部分页面希望每次打开时，都重新渲染（所有变量初始化为data中定义的值，并执行..
vue中keep-alive的include、exclude两个属性--避坑 和使用2个钩子函数activated、deactivated
一家外包公司的码农，专职前端开发
02-08 5658
keep-alive用法简介：我们在切换路由的时候，上一个页面就会被销毁，新的页面也会被创建，keep-alive它可以缓存组件，防止组件销毁，也就是说，我们在进行路由切换时，上次访问的页面数据依然存在，不会进行销毁。 普通用法： 只需要用keep-alive把需要缓存的组件包裹即可： <keep-alive> <router-view></router-view> </keep-alive> include属性：字符串或正则表达式。
更新商品前端接口编写
weixin_55639995的博客
07-12 378
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 422
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 199
vue 自定义滚动条同步拖动（移动端）
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 706
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 282
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值