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 相关文章推荐
javascript:void(0)的作用示例介绍
Oct 28 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
简述vue中的config配置
Jan 23 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
js+html实现点名系统功能
Nov 05 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
js中Object.create实例用法详解
Oct 05 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
PHP中error_log()函数的使用方法
2015/01/20 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
去除链接虚线全面分析总结
2006/08/15 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Angular路由简单学习
2016/12/26 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Python读写unicode文件的方法
2015/07/10 Python
django 创建过滤器的实例详解
2017/08/14 Python
python中join()方法介绍
2018/10/11 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
教师党员思想汇报
2014/01/06 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
起诉状范本
2015/05/20 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python 命令行传参方法总结
2021/05/25 Python
Django rest framework如何自定义用户表
2021/06/09 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python