Vue中维生如何实现后退不刷新并保持滚动位置 - 行业资讯

这篇文章将为大家详细讲解有关Vue中keep-alive如何实现后退不刷新并保持滚动位置，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

什么是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组件的activated和deactivated这两个生命周期钩子函数。

vue钩子函数的执行顺序:

不使用keep-alive

beforeRouteEnter --> 创建——比;安装——比;摧毁了

<强>使用点火电极

初次进入页面,beforeRouteEnter——比;创建——比;安装——比;激活——比;停用

再次进入缓存的页面,只会触发beforeRouteEnter——在激活——比;deactivated.created和安装不会再执行。

其中,

激活在点火电极组件激活时调用。

停用在点火电极组件被停用时调用。

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

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

<代码>家——比;pageA——比;pageB——比;pageC

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

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

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

所以,pageA和pageB需要缓存,pageC不需要缓存。
//router.js 　　import Vue 得到& # 39;vue # 39;; 　　import Router 得到& # 39;vue-router& # 39;; 　　Vue.use(路由器); 　　　　const router =, new 路由器({ 　　模式:大敌;& # 39;散列# 39; 　　,路线:[ 　　,{ 　　,,路径:& # 39;/& # 39; 　　,,名字:& # 39;回家# 39; 　　组件才能:,(),=比; 　　进口才能(& # 39;。/视图/Home.vue& # 39;), 　　元才能:{ 　　标题:才能,& # 39;首页& # 39;, 　　,,keepAlive: false //此组件不需要被缓存　　,,} 　　}, 　　,{ 　　,,路径:& # 39;/pageA& # 39; 　　,,名字:& # 39;pageA& # 39; 　　组件才能:,(),=比; 　　,,进口(& # 39;。/视图/pageA.vue& # 39;), 　　元才能:{ 　　标题:才能,& # 39;pageA& # 39; 　　keepAlive才能:,真的, 　　isBack才能:假　　,,} 　　}, 　　,{ 　　,,路径:& # 39;/pageB& # 39; 　　,,名字:& # 39;pageB& # 39; 　　组件才能:,(),=比; 　　,,进口(& # 39;。/视图/pageB.vue& # 39;), 　　元才能:{ 　　标题:才能,& # 39;pageB& # 39; 　　keepAlive才能:,真的, 　　isBack才能:假　　,,} 　　}, 　　,{ 　　,,路径:& # 39;/pageC& # 39; 　　,,名字:& # 39;pageC& # 39; 　　组件才能:,(),=比; 　　,,进口(& # 39;。/视图/pageC.vue& # 39;), 　　元才能:{ 　　标题:才能,& # 39;pageC& # 39; 　　keepAlive才能:假　　,,} 　　,} 　　,) 　　}); 　　export default 路由器;//pageA.vue 　　& lt; template> 　　,& lt; div 类=皃age-a"比; 　　& lt;才能h2> pageA</h2> 　　& lt;才能div> 　　,,& lt; div 类=癷tem", v=癷tem items"拷贝,@click=癵oPageB"比; 　　,,,{{,item }} 　　,,& lt;/div> 　　& lt;才能/div> 　　& lt;才能h2 @click=癵oPageB"祝辞go pageB
Vue中维生如何实现后退不刷新并保持滚动位置