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就没有必要了，

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 父组件给子组件传递数据的方法

    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 如何把子组件的数据传给父组件(推荐)

    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微信页面回退不刷

随机推荐