vue2.0页面前进刷新回退不刷新的实现方法
花了整整一周时间,尝试过很多种方法,终于找到了最佳的解决方案(对我来说最佳),为了祭奠逝去的一周,也为了释放激动的情绪,现在不得不写篇博客了。
直接上重点:
第一步:
//在APP.vue里面写上keepalive,可以实现缓存(keep-alive是什么?查看官方文档)
第二步:
//在router的index.js里面给需要缓存的页面加上meta参数
第三步:
//在APP.vue里面写,当页面路由发生变化时,将相应页面的滚动位置记录下来,在页面updated时读取并赋值
第四步:
//因为我的想法是从首页(index.vue)进入列表页时刷新数据,从列表页点击进入详情页,再返回列表页时不刷新,
所以从首页进入列表页时,将列表页的isBack设置为false,
然后在列表页的activated生命周期钩子中判断isBack,为false则执行加载函数,为true则使用缓存。
//index.vue中:
//list.vue中
至此,终于完美实现了效果,其实还有可优化的地方,加入需要keepalive的页面很多的话,每一个页面都写相同的beforeRouteLeave和activated就没有必要了,
但是具体怎么优化,等需要用到了再说吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue实现前进刷新后退不刷新效果
最近在用vue尝试着做移动端的项目.希望实现前进刷新.后退不刷新的效果.即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载).例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新. 由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面.于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true) 来将界面销毁掉.但是在移动
-
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc
-
vue2.0 + element UI 中 el-table 数据导出Excel的方法
1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel
-
vue2.0 父组件给子组件传递数据的方法
在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件. 1.安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2.删除 1.删除App中的一些内容如下 2.删除components文件中的HelloWorld.vue 3.修改 修改App.vue 如下: <templ
-
vue2.0 + ele的循环表单及验证字段方法
关于vue2.0 + ele的表单循环以及对应字段的验证!!!!! html代码 <el-form ref="ruleForm" :inline="true" :model="form" label-width="140px" :rules="rules" v-loading.fullscreen.lock="fullScreenLoading" element-loading-t
-
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用. <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:tou
-
vue2.0页面前进刷新回退不刷新的实现方法
花了整整一周时间,尝试过很多种方法,终于找到了最佳的解决方案(对我来说最佳),为了祭奠逝去的一周,也为了释放激动的情绪,现在不得不写篇博客了. 直接上重点: 第一步: //在APP.vue里面写上keepalive,可以实现缓存(keep-alive是什么?查看官方文档) 第二步: //在router的index.js里面给需要缓存的页面加上meta参数 第三步: //在APP.vue里面写,当页面路由发生变化时,将相应页面的滚动位置记录下来,在页面updated时读取并赋值 第四步: //因为
-
vue2.0实现移动端的输入框实时检索更新列表功能
最近在做vue2.0的项目遇到一个移动端实时检索搜索更新列表的效果,当用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· html <input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc&quo
-
vue2.0 如何把子组件的数据传给父组件(推荐)
在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App. ps:没看父组件传给子组件的先看看去. 1.代码 子组件 A.vue <template> <div> <h3>这里是子组件的内容</h3> <button v-on:click="spot">点一下就传</button> </div> </template> <script> export defa
-
Vue2.0子同级组件之间数据交互方法
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB
-
解决ios微信页面回退不刷新的问题
在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); }) 以上这篇解决ios微信页面回退不刷
随机推荐
- asp.net 中将表单提交到另一页 Code-Behind(代码和html在不同的页面)
- Perl哈希表用法解析
- 22点关于jquery性能优化的建议
- iOS中Cell的Section展开和收起的示例代码
- 使用getBoundingClientRect方法实现简洁的sticky组件的方法
- JDBC连接MySQL出现的问题
- Android编程实现加载等待ProgressDialog的方法
- 总结Python编程中三条常用的技巧
- 调试Javascript代码(浏览器F12及VS中debugger关键字)
- jquery实现用户打分评分特效
- JavaScript 数组的进化与性能分析
- Hardware_Info.vbs 获取硬件信息的VBS代码
- ADSL真正速度:宽带该有多快?
- IBM F11 一键恢复 功能使用说明
- Android编程操作嵌入式关系型SQLite数据库实例详解
- Android应用开发中自定义ViewGroup的究极攻略
- JS 数字转换为大写金额的简单实例
- 大型网吧网络组网方案网络规模 200-1000个用户节点以内
- vue-router2.0 组件之间传参及获取动态参数的方法
- 网易有道2017内推编程题 洗牌(python)