Vue中keep-alive 实现后退不刷新并保持滚动位置


Posted in Javascript onMarch 17, 2020

什么是KeepAlive?

首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念,不能混为一谈。实际上HTTP的KeepAlive写法是Keep-Alive,跟TCP的KeepAlive写法上也有不同。

  • TCP的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送心跳包给另一方,当一方端掉的时候,没有断掉的定时发送几次心跳包,如果间隔发送几次,对方都返回的是RST,而不是ACK,那么就释放当前链接。设想一下,如果tcp层没有keepalive的机制,一旦一方断开连接却没有发送FIN给另外一方的话,那么另外一方会一直以为这个连接还是存活的,几天,几月。那么这对服务器资源的影响是很大的。
  • HTTP的keep-alive一般我们都会带上中间的横杠,普通的http连接是客户端连接上服务端,然后结束请求后,由客户端或者服务端进行http连接的关闭。下次再发送请求的时候,客户端再发起一个连接,传送数据,关闭连接。这么个流程反复。但是一旦客户端发送connection:keep-alive头给服务端,且服务端也接受这个keep-alive的话,两边对上暗号,这个连接就可以复用了,一个http处理完之后,另外一个http数据直接从这个连接走了。减少新建和断开TCP连接的消耗。

二者的作用简单来说:

HTTP协议的Keep-Alive意图在于短时间内连接复用,希望可以短时间内在同一个连接上进行多次请求/响应。

TCP的KeepAlive机制意图在于保活、心跳,检测连接错误。当一个TCP连接两端长时间没有数据传输时(通常默认配置是2小时),发送keepalive探针,探测链接是否存活。

总之,记住HTTP的Keep-Alive和TCP的KeepAlive不是一回事。

tcp的keepalive是在ESTABLISH状态的时候,双方如何检测连接的可用行。而http的keep-alive说的是如何避免进行重复的TCP三次握手和四次挥手的环节。

正文开始。

vue可以通过<keep-alive>元素包裹组件,实现缓存,下次使用时不需要重新创建该组件。但存在一个问题:keep-alive包裹的组件中有滚动元素时,keep-alive不会储存滚动位置。

实现后退不刷新主要依据keep-alive组件的activated和deactivated这两个生命周期钩子函数。

vue钩子函数的执行顺序:

不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive

初次进入页面,beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated。created和mounted不会再执行。

其中,

activated在keep-alive组件激活时调用.

deactivated在keep-alive组件被停用时调用.

Demo 实现了后退不刷新,并且返回时滚动到上次浏览的深度。

该demo中,包含三个链接导航。

home --> pageA --> pageB --> pageC

依次前进,每次前进到一个新页面都需要获取数据,而按下后退键后,

从pageC返回到pageB,pageB不再获取新数据,而是使用之前缓存的数据。

从pageB返回到pageA时,pageA不再获取新数据,而是使用之前的数据。并且当pageA存在滚动条时,返回时会滚动到上次浏览高度。

所以,pageA和pageB需要缓存,pageC不需要缓存。

//router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const router = new Router({
 mode: 'hash',
 routes: [
 {
  path: '/',
  name: 'home',
  component: () =>
  import('./views/Home.vue'),
  meta: {
  title: '首页',
  keepAlive: false //此组件不需要被缓存
  }
 },
 {
  path: '/pageA',
  name: 'pageA',
  component: () =>
   import('./views/pageA.vue'),
  meta: {
  title: 'pageA',
  keepAlive: true,
  isBack: false
  }
 },
 {
  path: '/pageB',
  name: 'pageB',
  component: () =>
   import('./views/pageB.vue'),
  meta: {
  title: 'pageB',
  keepAlive: true,
  isBack: false
  }
 },
 {
  path: '/pageC',
  name: 'pageC',
  component: () =>
   import('./views/pageC.vue'),
  meta: {
  title: 'pageC',
  keepAlive: false
  }
 }
 ]
});
export default router;
//pageA.vue
<template>
 <div class="page-a">
  <h1>pageA</h1>
  <div>
   <div class="item" v-for="item in items" @click="goPageB">
    {{ item }}
   </div>
  </div>
  <h1 @click="goPageB">go pageB</h1>
 </div>
</template>

<script>
 export default {
  name: 'PageA',
  data() {
   return {
    msg: "我是PageA页面",
    items: Array.from({length:50}, (v,k) => k),
    data: "",
    scrollTop: 0
   };
  },
  beforeRouteEnter(to, from, next) {
   if(from.name == 'pageB'){
    to.meta.isBack = true;
   }

   next();
  },
  mounted() {
   console.log('mounted....');
   // this指向组件的实例,$el指向当前组件的DOM元素
   const $el = this.$el;
   //滚动事件
   $el.addEventListener("scroll", () => {
    //记录位置
    this.scrollTop = $el.scrollTop;
   });
  },
  activated() {
   if(!this.$route.meta.isBack){
    // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
    this.getData();
   } else {
    //恢复滚动条高度
    if(this.scrollTop) {
     setTimeout(() => {
      this.$el.scrollTop = this.scrollTop;
     }, 100);
    }
   }
   // 恢复成默认的false,避免isBack一直是true
   this.$route.meta.isBack = false;

  },
  methods: {
   getData() {
    // getData方法,模拟从后台请求数据
    this.data = "数据";
    console.log('get data')
   },
   goPageB(){
    this.$router.push({ path: "/pageB" });
   },
   back() {
    this.$router.push({ path: "/" });
   }
  },
 }
</script>
<style>
 .page-a {
  height: 100vh;
  overflow-y: auto;
 }
 .item {
  margin: 5px;
  padding: 10px;
  background: #ccc;
 }
</style>

代码请参考 链接 ;

后退不刷新还可以通过include实现,可参考链接

总结

到此这篇关于Vue中keep-alive 实现后退不刷新并保持滚动位置的文章就介绍到这了,更多相关keep-alive 后退不刷新持滚动位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS清除选择内容的方法
Jan 29 Javascript
node.js中 stream使用教程
Aug 28 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
Vue实现验证码功能
Dec 03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
用js编写留言板
Mar 17 #Javascript
Vue脚手架编写试卷页面功能
Mar 17 #Javascript
基于JavaScript实现留言板功能
Mar 16 #Javascript
JS实现简易留言板(节点操作)
Mar 16 #Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
You might like
php数组去重的函数代码
2013/02/03 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Django实现单用户登录的方法示例
2019/03/28 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
个人简历的自荐信
2013/10/23 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
毕业生应聘求职信
2014/07/10 职场文书
安全生产月宣传标语
2014/10/06 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
公司档案管理制度
2015/08/05 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python