当vue使用keep-alive缓存页面状态时，当不同路由指向同一个组件，如何分别缓存页面状态的问题。
vue缓存时如果发现组件相同，则会认定为同一个。
同一个组件根据不同路由做不同的缓存需在keep-alive的router-view中加上key，如下所示：
<keep-alive>
<router-view :key="$route.fullPath" />
</keep-alive>加上key，不同就一定会认为是不同的东西，可根据路由分别进行缓存。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
浏览器缓存主要分为强强缓存（也称本地缓存）和协商缓存（也称弱缓存）,强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.
一个缓存就是一个组件，它可以透明地存储数据，以便未来可以更快地服务于请求。缓存能够服务的请求越多，整体系统性能就提升得越多。
浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中,为什么使用缓存：减少网络带宽消耗，降低服务器压力，减少网络延迟，加快页面打开速度
一个H5页面在APP端，如果勾选已读状态，则下次打开该链接，会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案，回顾了下Web缓存的知识
在描述CDN的实现原理之前，让我们先看传统的未加缓存服务的访问过程，以便了解CDN缓存访问方式与未加缓存访问方式的差别，用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名；
页面打开时，由于缓存的存在，刚刚更新的数据有时无法在页面得到刷新，当这个页面作为模式窗口被打开时问题更为明显， 如何将缓存清掉？
通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值：缓存头Cache-Control只能在服务端设置，在客户端是由浏览器设置的，自己不能修改它的值。
增量更新是目前大部分团队采用的缓存更新方案，能让用户在无感知的情况获取最新内容。具体实现方式通常是（一般我们通过构建工具来实现，比如webpack）：
浏览器会默认缓存网站的静态资源文件，如：js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰，最常见的问题就是不能及时更新静态资源，造成新版本发布时用户无法及时看到新版本的变化，严重影响了用户体验。
一个后台管理系统，一个列表页A路由配置需要缓存，另一个页面B里面有多个跳转到A路由的链接。问题描述：首先访问/A?id=1页面，然后到B页面再点击访问A?id=2的页面，发现由于页面A设置了缓存，数据还是id=1的数据，并没有更新。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!