vue2.0页面前进刷新回退不刷新的实现方法


Posted in Javascript onJuly 31, 2018

花了整整一周时间,尝试过很多种方法,终于找到了最佳的解决方案(对我来说最佳),为了祭奠逝去的一周,也为了释放激动的情绪,现在不得不写篇博客了。

直接上重点:

第一步:

//在APP.vue里面写上keepalive,可以实现缓存(keep-alive是什么?查看官方文档)

vue2.0页面前进刷新回退不刷新的实现方法

第二步:

//在router的index.js里面给需要缓存的页面加上meta参数

vue2.0页面前进刷新回退不刷新的实现方法

第三步:

//在APP.vue里面写,当页面路由发生变化时,将相应页面的滚动位置记录下来,在页面updated时读取并赋值

vue2.0页面前进刷新回退不刷新的实现方法

第四步:

//因为我的想法是从首页(index.vue)进入列表页时刷新数据,从列表页点击进入详情页,再返回列表页时不刷新,

所以从首页进入列表页时,将列表页的isBack设置为false,

然后在列表页的activated生命周期钩子中判断isBack,为false则执行加载函数,为true则使用缓存。

//index.vue中:

vue2.0页面前进刷新回退不刷新的实现方法

//list.vue中

vue2.0页面前进刷新回退不刷新的实现方法

至此,终于完美实现了效果,其实还有可优化的地方,加入需要keepalive的页面很多的话,每一个页面都写相同的beforeRouteLeave和activated就没有必要了,

但是具体怎么优化,等需要用到了再说吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
JS实现移动端触屏拖拽功能
Jul 31 #Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 #Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 #Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 #Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 #Javascript
You might like
PHP 全角转半角实现代码
2010/05/16 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python使用knn实现特征向量分类
2018/12/26 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
EJB的基本架构
2016/09/22 面试题
入党自我鉴定范文
2013/10/04 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
商铺租赁意向书
2014/04/01 职场文书
优秀团员自我评价
2015/03/10 职场文书
优秀大学生申请书
2019/06/24 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js