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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jquery提示效果实例分析
Nov 25 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 Javascript
用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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP 读取和编写 XML
2014/11/19 PHP
ThinkPHP模型详解
2015/07/27 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
深入理解Python中range和xrange的区别
2017/11/26 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Keras 使用 Lambda层详解
2020/06/10 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
大学生个人求职信范文
2013/09/21 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
小学生节水倡议书
2015/04/29 职场文书
公司开业主持词
2015/07/02 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript