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微信页面回退不刷
随机推荐
- 教你如何使用PHP输出中文JSON字符串
- python 如何快速找出两个电子表中数据的差异
- ASP的Global.asa文件技巧用法
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- JS实现从表格中动态删除指定行的方法
- 利用ASP.NET MVC+EasyUI+SqlServer搭建企业开发框架
- ASP.NET中FCKEDITOR在线编辑器的用法
- php选择排序法实现数组排序实例分析
- C# 生成随机数的代码
- js编写的treeview使用方法
- C语言矩阵连乘 (动态规划)详解
- systemer.exe-B001.exe,B002.exe,cx.exe专杀 软件
- SQL cursor用法实例
- 遍历文件系统目录树的深入理解
- php实现SAE上使用storage上传与下载文件的方法
- jQuery实现淡入淡出二级下拉导航菜单的方法
- 使用闭包对setTimeout进行简单封装避免出错
- JAVA加密算法- 非对称加密算法(DH,RSA)的详细介绍
- C#枚举类型与结构类型实例解析
- Android开源项目PullToRefresh下拉刷新功能详解2