ios 销毁当前页面重新开启_利用Vue中keep-alive,快速实现页面缓存
keep-alive
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染
应用场景
如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:
- 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
- 订单列表跳转到订单详情,返回,等等场景。
keep-alive的生命周期
- 初次进入时:created > mounted > activated;退出后触发 deactivated
- 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中
项目实践
1.更改App.vue
<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
2.在路由中设置keepAlive
{path: 'list',name: 'itemList', // 商品管理component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '商品管理'}
}
3.更改 beforeEach钩子
这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存:
- 若第一次进入A页面后退出,再次进入页面时,页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回,页面保持不变,而不是退出后重新进入保持不变。
- 在进入过A页面后进入B页面,经过测试后发现,B页面竟然会显示A页面的缓存,尽管url已经改变
为了解决这个问题,需要判断页面是在前进还是后退。 在beforeEach钩子添加代码:
let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {// console.log('back...')from.meta.keepAlive = falseto.meta.keepAlive = true
}
记录页面滚动位置
keep-alive并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated钩子时重新定位到原有位置。 具体设计思路:
- 在deactivated钩子中记录当前滚动位置,使用localStorage:
deactivated () {window.localStorage.setItem(this.key, JSON.stringify({listScrollTop: this.scrollTop}))
}
- 在activated钩子中滚动:
this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)
欢迎在下方留言讨论,更多内容可搜索关注微信公众号“一郭鲜”,小郭与你一起成长!
ios 销毁当前页面重新开启_利用Vue中keep-alive,快速实现页面缓存相关推荐
- 利用Idea中Gson插件快速编辑POJO类
利用Idea中Gson插件快速编辑POJO类 (1)需求说明 现在有一个hashmap,想写一个POJO类实现它所有字段的get.set方法,当hashmap中字段较多的时候,过程会变成很繁琐的体力活 ...
- vuejs页面跳转_【Vue 学习】 VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
- java 页面接收参数_详解SpringMVC——接收请求参数和页面传参
spring接收请求参数: 1,使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(Ht ...
- python汇率转换_利用Python中的Xpath实现一个在线汇率转换器
前言 在之前的语法里面,我们记得有一个初识Python之汇率转换篇,在那个程序里面我们发现可以运用一些基础的语法写一个汇率计算,但是学到后面的小伙伴就会发现这个小程序有一定的弊端. 首先,它不可以实时 ...
- 赋值后页面不渲染_第七节:框架搭建之页面静态化的剖析
一. 前言 抛砖引玉: 提到项目性能优化,大部分人第一时间就会想到缓存,针对"读多写少"的数据,可以放到缓存里,设置个过期时间,这样就不用每次都去数据库中查询了, 减轻了数据库的压 ...
- vue 同级页面调用方法_【Vue】一个vue页面调用另一个vue页面中的方法
想仿着 vue-material 的 Demo & Document 页面的效果写一个小例子. 遇到问题的地方是: 如上图红色圈出的地方,点击 button 按钮时,无法执行 toggle() ...
- ocr语种识别_利用OCR图文识别,快速帮你提取文字信息
我们在浏览网页.读书的时候,经常找到我们感兴趣的资料,有时候一些纸质文字或图片是无法复制保存的,那么为了方便这类信息的提取.编辑保存,中安未来特研发了OCR图文识别技术: 中安未来OCR图文识别技术是 ...
- java tomcat 404配置_在Tomcat中配置404自定义错误页面详解
一直使用tomcat,今天想到一个问题,自定义404错误页面, 为了获得很好的用户感受,是不应当向用户暴露404这样的页面的, 问题的出发点是我在Struts2中定义错误页面, 在Struts2中是这 ...
- vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据
使用Vue实现调用接口加载页面初始数据 闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'' ...
最新文章
- 数据库 实体间的3种关系
- 刚入职新公司做一些什么贡献_如果您有全职工作,如何为Kubernetes做贡献
- 【jvm】jvm 网络使用率 nicstat
- C语言之运算符优先级(四十二)
- vlfeat python
- 无法阻止的电竞热潮-用电竞连接世界
- 开源磁力搜索爬虫dhtspider原理解析
- 信息系统安全等级保护 备案表
- vm服务器复制文件,怎么实现从宿主机拖动复制文件到虚拟机VM中的示例
- 大数据培训课(体验) Day02
- 写完十四章卡农后,莫比乌斯带属实是给巴赫玩明白了
- 互联网晚报 | 7月14日 星期四 |微博将整治用谐音字变体字传播不良信息;恒丰银行回应破产传闻;消息称字节正大量招聘芯片工程师...
- 李飞飞创建ImageNet的基本逻辑
- 第八十三章 Caché 函数大全 $ZDATE 函数
- 民企员工股权激励的前提条件
- PCM开发板模块实验指导--有刷直流马达速度位置控制实验
- MySQL---基础
- Eclipse Virgo插件
- Win7普通版升为旗舰版方法
- STM32最小核心板F103串口通信USART
热门文章
- angularjs应用总结
- spring3的JAR包与注解学习笔记
- CCNA-(5)-IP路由汇总
- java 对话框打开与保存
- javascript比较日期
- Linq中字段数据类型转换问题(Linq to entity,LINQ to Entities 不识别方法System.String ToString()问题解决)...
- 环境部署(二):Linux下安装jenkins
- 循环不变式(loop invariant)
- linux下limits.conf 修改不生效的原因
- nginx return知多少