Vue中keep-alive 实现后退不刷新并保持滚动位置
什么是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组件的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
importVuefrom'vue';
importRouterfrom'vue-router';
Vue.use(Router);
constrouter=newRouter({
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
}
}
]
});
exportdefaultrouter;
//pageA.vue
pageA
{{item}}
代码请参考 链接；
后退不刷新还可以通过include实现，可参考链接
总结
到此这篇关于Vue中keep-alive实现后退不刷新并保持滚动位置的文章就介绍到这了,更多相关keep-alive后退不刷新持滚动位置内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。