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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
js获取域名的方法
Jan 27 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js实现简易拖拽的示例
Oct 26 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
js动态引入的四种方法
2018/05/05 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
浅谈django orm 优化
2018/08/18 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
最新大学生自我评价
2013/09/24 职场文书
物业管理计划书
2014/01/10 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
给校长的建议书400字
2014/05/15 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL