如何解决在使用keepAlive后使用grid+echart的页面高度异常的问题

最新推荐文章于 2023-10-12 10:26:03 发布
最新推荐文章于 2023-10-12 10:26:03 发布
阅读量343 收藏
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juvialoxer/article/details/107185137
版权

问题描述:a页面使用ivew的栅格+echart页面绘制,并保证高度自适应,b页面使用keepAlive做页面缓存;
1,在第一次进入该页面是显示正常,当从b页面回到a页面时发现高度过大;但其他未使用keepAlive的页面无此问题
2,多次测试后发现,是由于b页面没有销毁导致该问题存在,虽然尝试过通过路由守卫强制销毁页面,但结果并不理想;
3,最后决定对a页面使用keepAlive,通过activated检测a页面是否是由其他页面进入的,并刷新数据

juvialoxer
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
面试中常见的keep-alive问题
weixin_49920110的博客
06-01 2647
什么是keep-alive？ keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 keep-alive的优点？ 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 keep-alive有三属性 include - 字符串或正则表达，只有匹配的组件会被缓存 max-数字，最多可以缓存多少组件实
keep-alive包裹的el-tabs中有两个页面使用echart渲染空白问题
寬真
01-20 269
【代码】keep-alive包裹的el-tabs中有两个页面使用echart渲染空白问题。
关于 vue keep-live 缓存时候，缓存页面高度不生效问题 ：
weixin_45379180的博客
09-19 540
keep-live
keep-alive处理页面回显问题以及如何回显页面上次浏览高度的问题
csstmg的博客
07-20 1160
应用场景 如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如： 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息 订单列表跳转到订单详情，返回，等等场景。 keep-alive的生命周期 初次进入时：created > mounted > activated；退出后触发 deactivated 再次进入：会触发
vue路由缓存keepAlive导致echarts图表100px偶现
weixin_44824290的博客
12-11 504
vue路由缓存keepAlive导致Echart图表100px
keepAlive缓存页面及缓存页面滚动高度
jiang_w1的博客
09-15 1104
vue实际项目很多时候会遇到列表页，详情页，一般在移动端通常有这样的情况：列表页——>详情页——>列表页，这时候在返回列表页时通常希望页面保存在我们进入详情页时的样子，这时候就需要用到keepAlive。 这里我们利用include来缓存我们需要缓存的页面(组件的name)，同时将数据保存在store里 App.vue <transition :name="transitionName" > <keep-alive :include="keepAlive">
解决Vue中使用keepAlive不缓存问题
10-15
在Vue.js应用中，`keep-alive` 是一个特殊的组件，...通过以上方法，可以有效地解决`keepAlive` 不缓存的问题，实现组件的正确缓存和管理。在实际项目中，根据需求灵活运用这些知识，能够优化用户体验并提升应用性能。
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。 是Vue的内置...
在Linux环境下使用TCP的keepalive机制
01-20
Linux内置支持keepalive机制，为了使用它，你需要使能TCP/IP网络，为了能够配置内核在运行时的参数，你还需要procfs和sysctl的支持。 　这个过程涉及到keepalive使用的三个用户驱使的变量： 　tcp_keepalive_time...
nginx+keepalive使用文档
03-21
nginx+keepalive使用文档,已读，亲测，完整，绝对超值。。。
Vue3内置组件KeepAlive一些其他问题
最新发布
weixin_48142622的博客
10-12 161
这里是我系统中使用的KeepAlive代码，使用了include属性来缓存需要被keepAlive的路由名称，这时出现了个问题，我的文件夹命名方式都是文件目录是组件名称或者路由名称，里面文件使用了index.vue进行命名，在浏览器的vue-devtools可以看出keepalive了一些同名组件，文件名为Index.vue这些组件并没有被缓存。我的项目是使用了setup语法糖进行书写代码的，所以手动给该组件添加了对应的路由名字，这样keepalive就能正确识别该组件而进行缓存了。
vue3.0 使用 keep-alive 标签无效, 及其在 vue admin Layout 多级嵌套下出现问题
阿臻
08-12 4718
先说一下问题所在,虽然vue3.0 不需要 root div, 但是keep-alivetransition这两个标签都需要。
【vue使用keep-alive引起的页面错乱】vue 使用keep-alive出现页面错乱问题
weixin_45191052的博客
12-24 3213
需求：产品要求页面A跳转页面B,然后返回页面A,返回时页面要滚动到上次离开的位置 1.听到这个需求首先想到的是利用vue路由中的滚动行为，但是这个功能使用是有条件限制的。vue 路由滚动行为 只能适用于路由模式是history模式，项目使用的是hash模式，所只能想其他办法了。 2.然后想到的是利用keep-alive缓存 首先再你的路由表中设置keepAlive字段，你所需要缓存的页面 然后再router-view使用keep-alive组件 注意这个key，这个key属性有大的作用，很关.
＜vue2.0+ant框架＞使用keep-alive实现页面缓存 竟出现页面错乱的问题？！
weixin_46760480的博客
11-22 939
后台管理系统需要做一个页面tab切换并且缓存页面(杜绝每次切换页面都重新加载) 的功能。
vue使用keep-alive缓存页面 回到滚动位置
zluz_的博客
03-18 2056
vue使用keep-alive缓存页面 回到滚动位置
vue页面缓存路由高度和页面
qq_33249977的博客
03-30 492
先设置路由模块元：{ path：'/ category'， name：'Category'， component：Category， meta：{ keepAlive：true }}其次对路由器视图视图层修改：&lt;keep-alive&gt; &lt;router-vie...
vue中模块根据屏幕自适应高度问题
晚星的博客
04-29 805
template <div ref="page"></div> script data(){ return{ clientHeight:'', } } mounted(){ this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度 let that = this; window.onresize = function(){
vue3项目keepAlive使用方法详解
热门推荐
蓑笠翁
11-07 4万+
一、介绍 keepalive是Vue的内置组件，作用是将组件缓存在内存当中，防止重复渲染DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法vue2.x与vue3.x有部分差别。以下主要将keepaliev在vue3.0中的用法。 二、使用 通常我们可以配置整个页面缓存或只让特定的某个组件保持缓存信息，配置了keepalive的路由或者组件，只会在页面初始化的时候执行created->mounted生命周期，第二次及以后再进入该页面将不会执行改生命周期，而是会去读取缓存信息。 1、
vue3 路由多层嵌套 keepalive 不生效
偷喝汽水的博客
06-11 3914
vue3 路由多层嵌套 keepalive 不生效
vue使用keepalive后query传参的页面还保留着上一次页面的高度
07-12
关于你的问题，当使用 Vue 的 `<keep-alive>` 组件后，页面会被缓存起来，保留上一次的状态。这也包括页面的滚动位置。如果你希望每次进入页面时都回到顶部，可以在页面组件的 `activated` 生命周期钩子中添加滚动到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值