问答

keep-alive能不能缓存页面组件的位置呢

作者:admin 2021-04-30 我要评论

keep-alive能不能缓存页面组件的位置呢,就比如切换路由的适合或者切换组件的适合,能不能把上个页面的滚动位置也缓存下来呢,我记得之前是可以的,现在好像不行...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

keep-alive能不能缓存页面组件的位置呢,就比如切换路由的适合或者切换组件的适合,能不能把上个页面的滚动位置也缓存下来呢,我记得之前是可以的,现在好像不行,如果可以的话该怎么缓存呢,如果不行的话,是为什么呢,如果不行的话,那他缓存的是数据是吗

###

其实在官方文档中,已经说明了keep-alive的作用:

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

因为组件实例拥有$el属性指向DOM,所以也会使得相应的DOM不会得到释放,从而缓存DOM

滚动位置

浏览器滚动条的滚动距离是由浏览器内部所控制和记录的。
DOM从文档中被移除后再重新插入文档时,浏览器会重新渲染相应视图部分。而浏览器只关心当前的文档模型,是不会记录之前的变动的。因此,与滚动相关的记录将丢失。
在重新导航时,浏览器为了防止长时间的白屏,会对每个页面离开时的状态进行缓存,并在重新导航后试图更新缓存的页面。但这仅是浏览器为了防止白屏做的优化行为,而且只能在页面导航切换时会被应用。在单页面应用中是不会发生的。
vue-router中,为了模拟浏览器的这一行为,专门提供了设置路由切换后滚动位置的方法。但与浏览器的行为不同,浏览器是直接读取缓存,即使在无网络环境下仍然可以渲染;但vue-router只是模拟滚动位置,在无网络环境下,可能无法正常渲染。
对于vue的组件片段,在通常情况下是无法记录滚动距离的,除非自行模拟实现。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • keep-alive能不能缓存页面组件的位置呢

    keep-alive能不能缓存页面组件的位置呢

  • docker nginx 配置不挂宿主机解决方案

    docker nginx 配置不挂宿主机解决方案

  • 循环动画 tween durationMillis &g

    循环动画 tween durationMillis &g

  • js 用不包含关键字,最短的代码将字符

    js 用不包含关键字,最短的代码将字符

腾讯云代理商
海外云服务器