vue关于keep-alive的小坑

最新推荐文章于 2024-03-22 11:01:48 发布
最新推荐文章于 2024-03-22 11:01:48 发布
阅读量112 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xiechuanghong/p/10554175.html
版权

在移动端里 少不了底部导航 在做底部导航的时候点击都会重复请求 我就使用了keep-alive来缓存 每次点击的时候走缓存

这里还有个用途就是当有列表的时候点进详情在返回可以保存之前的滚动记录 不会刷新页面 用法很简单

 

在路由文件里将要缓存的页面使用keepAlive:true这样每次都会走缓存

 

这里有个问题  注意！！

在缓存的页面如果有上拉到底部刷新这种 设置了缓存 在其他页面拉到一定距离的时候不知道什么鬼缓存的那个页面也会触发 

这里我用了一个土办法来避免他滚动 给每个页面监听一遍路由

这样就不会了

这里还有个问题就是设置了keep-alive的页面其他页面滚动的时候他也会跟着滚动

这里就用下面这个方法

记录下 以后用的到！

转载于:https://www.cnblogs.com/xiechuanghong/p/10554175.html

weixin_33874713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
keep-alive遇到的坑
liu_xiaoru的博客
10-29 1721
43243
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
vue中使用keepAlive的坑
sslcsq的博客
08-13 2603
前言： vue中使用keepAlive数据不刷新，只缓存第一次进入的页面数据。 需求： 首页进入列表页，根据不同id刷新列表页面数据，列表页进入详情页，详情页返回列表页时不刷新。 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <
说一说 vue 的 keep-alive ？
油墨香^-^的博客
10-18 587
使用方法：使用``标签对需要缓存的组件进行包裹，默认情况下被``标签包裹的组件都会进行缓存，区分被包裹的组件是否缓存有两种方法，第一种是给keepalive 添加属性，组件名称指的是具体组件添加的name，不是路由里面的name。首页展示固定数据的组件，比如banner九宫格标准回答 ``
项目难点：keep-alive的那些坑坑
m0_73661157的博客
02-12 822
项目中遇到的问题
KeepAlive详解
weixin_30847271的博客
07-17 1872
KeepAlive既熟悉又陌生，踩过坑的同学都知道痛。一线运维工程师踩坑之后对于KeepAlive的总结，你不应该错过！ 最近工作中遇到一个问题，想把它记录下来，场景是这样的： 从上图可以看出，用户通过Client访问的是LVS的VIP， VIP后端挂载的RealServer是Nginx服务器。 Client可以是浏览器也可以是一个客户端程序。一般情况下，这种架构不会出现问...
keep-alive的使用和遇到的坑
qq_46558284的博客
03-22 916
keep-alive的使用和遇到的坑
vue中keep-alive的用法及问题描述
12-29
1.keep-alive的作用以及好处 在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止...
vue keep-alive请求数据的方法示例
08-27
描述：本篇文章主要介绍了 Vue Keep-Alive 请求数据的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。 标签：Vue Keep-Alive 请求数据，Vue Keep-Alive 数据 Vue Keep-...
vue使用keep-alive保持滚动条位置的实现方法
10-17
主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
keep-Alive遇到的一个坑
qq_33203555的博客
06-11 728
在vue中，有时候我们需要缓存一个页面，这个时候会用到keep-Alive。 触发场景： 在引用同一个子组件得两个页面，且该子组件会使用到dom元素得时候。 例如子组件 <template> <div class="yd-dialog-black-mask" v-show="showMask"> <div class="layer-wraper"> ...
Vue2.0 心法 ==> 第三层：keep-alive 缓存之坑
鹿的迷雾林的博客
11-23 7641
初学vue2.0，发现自己智商不够用啊。 最近在路由缓存处又遇到一个坑。 由于整个项目是同事构建的，我只负责开发定位监控页。在此处有一个需求，所有路由都要用到keep-alive缓存，而其中一个地图路由不能有缓存。
vue keep-alive缓存遇到的坑
xiezexi的博客
11-12 462
最近公司要用vue来开发项目,身为一个后端开发人员只好边学边做了 最近要用到vue的页面缓存,记录一下踩的坑. 通过查看文档知道vue中keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减少加载时间及性能消耗，提高用户体验性。 ...
vue中的keep-alive的入坑指南
热门推荐
wangk_的博客
06-15 1万+
最近有个变态需求：重新点击路由导航时刷现当前路由页面，该路由页面是一个列表页面，点击详情的时候跳转详情页面，详情页面返回列表页面时，使用缓存的列表页面。    实现步骤：    1.使用keep-alive缓存路由页面    2.网上的找到的方法实现点击路由导航刷新当前路由：         通过 v-if控制，重写点击导航的事件，代码如下：下面是reload方法：总结要点：    1.v-if判...
关于keepAlive踩坑，动态缓存的问题
weixin_43772661的博客
07-28 1863
最近公司项目实践中，记录遇到页面跟页面之间缓存的问题，首先想到用keepAlive去解决，首先先说明问题，再详细说明解决方法：(涉及到公司，某些代码用伪代码展示) 问题一：直接上代码 <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" /&
keep-alive缓存遇到的坑
fj56355113的专栏
09-26 2424
keep-alive 属性： include- 字符串或正则表达式。只有匹配的组件会被缓存。 exclude- 字符串或正则表达式。任何匹配的组件都不会被缓存。 用法： <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它...
http中的KeepAlive
weixin_30603633的博客
08-03 183
为什么要使用KeepAlive？ 终极的原因就是需要加快客户端和服务端的访问请求速度。KeepAlive就是浏览器和服务端之间保持长连接，这个连接是可以复用的。当客户端发送一次请求，收到相应以后，第二次就不需要再重新建立连接（慢启动的过程）,就可以直接使用这次的连接来发送请求了。在HTTP1.0及各种加强版中，是默认关闭KeepAlive的，而在HTTP1.1中是默认打开的。 HTTP头...
http keep-alive 解释
weixin_33847182的博客
09-03 187
1、概念 keep-alive示例：     keep-alive模式（又称持久连接、连接重用）时，keep-alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，keep-alive功能避免了建立或者重新建立连接。 http 1.0中默认是关闭的，需要在http头加入"Connection: keep-alive"，才能启用keep-alive；http ...
Vue关于 keep-alive的一些用法以及采坑记录
Candy_mi的博客
09-19 5458
<keep-alive> 可以对不同的组件进行缓存 keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一 个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素 <keep-alive>生命周期 activated：页面第一次进入的时候，钩子触发的顺序是created->mo...
vue3 keep-alive
最新发布
04-24
Vue 3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，带来了许多新的特性和改进。其中一个特性是`keep-alive`，它是Vue 3中的一个内置组件，用于缓存和保留组件的状态。 `keep-alive`组件可以包裹动态组件，并在组件切换时保留其状态，以避免重新渲染和销毁。它可以提高应用程序的性能和用户体验，特别是在频繁切换组件时。 使用`keep-alive`组件很简单，只需将需要缓存的组件包裹在`<keep-alive>`标签中即可。例如： ```html <template> <div> <button @click="toggleComponent">Toggle Component</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> export default { data() { return { currentComponent: 'ComponentA' }; }, methods: { toggleComponent() { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; } } }; </script> ``` 在上面的示例中，点击"Toggle Component"按钮会切换`currentComponent`的值，从而切换显示的组件。由于`<keep-alive>`包裹了`<component>`，在切换组件时，之前渲染的组件会被缓存起来，以便下次再次显示时可以直接使用缓存的状态，而不需要重新创建和渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值