keep-alive

一、什么是长连接 HTTP1.1规定了默认保持长连接（HTTP persistent connection ，也有翻译为持久连接），数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据；相反的就是短连接。 HTTP首部的Connection: Keep-alive是HTTP1.0浏览器和服务器的实验性扩展，当前的HTTP1.1 RFC2616文档没有对它做说明，因为它所需要的功能已经默认开启，无须带着它，但是实践中可以发现，浏览器的报文请求都会带上它。如果HTTP1.1版本的HTTP请求报文不希望使用长连接，则要在HTTP请求报文首部加上Connection: close。《HTTP权威指南》提到，有部分古老的HTTP1.0 代理不理解Keep-alive，而导致长连接失效：客户端–>代理–>服务端，客户端带有Keep-alive，而代理不认识，于是将报文原封不动转给了服务端，服务端响应了Keep-alive，也被代理转发给了客户端，于是保持了“客户端–>代理”连接和“代理–>服务端”连接不关闭，但是，当客户端第发送第二次请求时，代理会认为当前连接不会有请求了，于是忽略了它，长连接失效。书上也介绍了解决方案：当发现HTTP版本为1.0时，就忽略Keep-alive，客户端就知道当前不该使用长连接。其实，在实际使用中不需要考虑这么多

一、什么是长连接 HTTP1.1规定了默认保持长连接（HTTP persistent connection ，也有翻译为持久连接），数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据；相反的就是短连接。 　HTTP首部的Connection: Keep-alive是HTTP1.0浏览器和服务器的实验性扩展，当前的HTTP1.1 RFC2616文档没有对它做说明，因为它所需要的功能已经默认开启，无须带着它，但是实践中可以发现，浏览器的报文请求都会带上它。如果HTTP1.1版本的HTTP请求报文不希望使用长连接，则要在HTTP请求报文首部加上Connection: close。《HTTP权威指南》提到，有部分古老的HTTP1.0 代理不理解Keep-alive，而导致长连接失效：客户端-->代理-->服务端，客户端带有Keep-alive，而代理不认识，于是将报文原封不动转给了服务端，服务端响应了Keep-alive，也被代理转发给了客户端，于是保持了“客户端-->代理”连接和“代理-->服务端”连接不关闭，但是，当客户端第发送第二次请求时，代理会认为当前连接不会有请求了，于是忽略了它，长连接失效。书上也介绍了解决方案：当发现HTTP版本为1.0时，就忽略Keep-alive，客户端就知道当前不该使用长连接。其实

另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新 vue.js vue-cli vue-router javascript 阅读约 16 分钟 目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。 注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。 项目需求： 任何技术的探索，都来自项目的需求。之前经手的一个项目是微信端商城，使用的是传统的mvc模式，利用的是jq+js，因此对于商城的项目需求比较熟悉。目前在学习vue，练手一个商城，遇到之前经常提及而无法很好解决的需求。有些页面需要前进刷新，后退不刷新。比如，从商城的【首页】-->【详情页】-->【订单提交页】，每次打开新页面都需要获取新数据，但是按下返回键后，就不需要再获取新数据了，而滚动条还保留在之前的位置。最常见的操作是从【首页】-->【详情页】，然后在从【详情页】-->【首页】，如此反复。 实例如图： 前人经验： 前人栽树，后人好乘凉。技术圈的分享一直都在蓬勃发展。遇到问题，我们可以尽情去搜索，去寻找大佬的足迹。针对上述需求，看到一个分享 vue-router 之 keep-alive ，比较符合我的需求，但是使用到我的项目上发现

keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM； keep-alive包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们； <div> <!-- 当点击button时 组件one-name会根据status状态来切换 --> <span @click="button1" style="padding: 0 25px;">button</span><span @click="button2">button1</span> </div> <!-- include: 字符串或正则表达式。只有匹配的组件会被缓存 <keep-alive :include='OnetName'> 将会缓存组件名为OnetName的组件--> <!-- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存 <keep-alive :exclude='OnetName'> 将不会缓存组件名为OnetName的组件--> <keep-alive > <one-name v-if="status"></one-name> </keep-alive> 被keep-alive缓存的组件（当点击button按钮时 如果是被keep-alive缓存的组件则 "vue实例化" -> "dom渲染完毕"，如果没有被缓存，则会一直 "vue实例化" ->

保证组件活着 keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免组件重新渲染,频繁创建销毁，router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存 keep-alive有两个非常重要的属性 include -- 字符串或正则表达，只有匹配的组件才会被缓存 exclude --字符串或正则表达，任何匹配的组件都不会被缓存 <keep-alive exclude="profile,user"> <route-view/> </keep-alive> 这两个函数只有组件使用了keep-alive时才有效 activated(){ console.log("当前组件活跃") } deactivated(){ console.log("当前组件不活跃") } 来源： 51CTO 作者： 喝醉的熊 链接： https://blog.51cto.com/13550695/2464461