vue路由缓存
如果您想了解有关vue路由缓存的更多信息，那么您来到了正确的地方。在本文中，我们将详细介绍vue设置缓存方面的内容，并为您提供一些有用的知识。记得将我们的网站添加到收藏夹中，以获取更多相关的信息。
本文内容目录一览：
- 1、Vue keep-alive本地路由缓存和图片懒加载
- 2、vue中动态路由组件缓存及生命周期函数
- 3、vue 路由缓存
- 4、vue路由缓存了为什么还会执行created
- 5、解决vue keepAlive 二次进入页面显示首次缓存问题
Vue keep-alive本地路由缓存和图片懒加载
keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验，下图缓存整个路由视图(所有页面)，也可以缓存单个组件
图片懒加载用了 vue-lazyload 组件，npm安装：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之后在需要懒加载的图片上把src换成v-lazy
效果如图
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载，因为很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时，可以先显示一张loading的动态图，预先让用户有心理准备，否则打开后一片空白会使得用户体验变差。
vue中动态路由组件缓存及生命周期函数
keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop :
有两个生命周期函数：
activated ：激活
deactivated ：失活
利用keep-alive实现滚动条保存：
思路 ： 在路由页面离开 beforeRouterEnter 中保存当前滚动条距离顶部的位置，再用 activated 钩子函数 当他再次被激活时，让他的滚动条等于离开时保存的那个值。
beforeCreate ：组件实例刚被创建，组件属性计算之前，如data属性等
created ：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount ：模板编译 / 挂载之前
mounted ：模板编译 / 挂载之后
beforeUpdate ：组件更新之前
updated ：组件更新之后
activated ：组件被激活时调用
deactivated ：组件被移除时调用
beforeDestory ：组件销毁前调用
destoryed ：组件销毁后调用
(1) 创建阶段
创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了。
(2) 挂载阶段
beforeMount和mounted两者主要区别在于模板是否编译和挂载了。
(3) 更新阶段
beforeUpdate 和 updated 就是当数据发生变化的时候出发的。
(4) 销毁阶段
beforeDestory 和 destoryed 的区别就是el的值data的数据依然在的。这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom。
vue 路由缓存
在写一个移动端项目时遇到了一个问题，每一个tab栏所对应的页面被封装成一个组件进行
复用，结果会导致他们共用一个滚动条。解决办法是给这个子组件加固定的高度（例如
height:100vh），同时加一个属性overflow-y:auto，这样就可以解决这个问题。之后发现每当进
入主页中任意一篇文章再退出时，页面重新加载渲染了，之前的文章消失了，所有在这里想到
了路由缓存。
先说一下keep-alive的属性和用法。
Props ：
用法 ：
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
（只有被keep-alive包裹的组件才具有这两个钩子函数）
其实不太建议使用include的，因为如果多个组件中都包括include中匹配到的组件，想单独
的让其中某个组件缓存是不太方便的。所以可以在分发路由时，在需要缓存的路由中把额外标
记的属性写在meta中，如图1。
使用的时候可以在根组件中通过$route.meta.keepAlive取到该值，然后进行v-if判断即可，如图
2，这样使用起来相对灵活一点。
使用keep-alive缓存路由后，已经解决了主要问题，但是有新的问题出现。缓存过的组件重
新被激活时不会记录滚动条的状态，默认置顶，所以应该监听这个被复用的组件的onscroll事
件，动态记录滚动条的位置状态，然后重新赋值给scrollTop（如果还想优化最好给滚动事件来
一个防抖处理）。那么问题来了，应该在何时重新赋值呢？上面用法中提到了当组件在keep-
alive 内被切换时会触发activated这个钩子函数，所以应在这里赋值。
vue路由缓存了为什么还会执行created
设置。在vue路由设置了缓存完继续执行，就会出现vue路由缓存了会执行created，正常关闭即可。vue中的路由是在找到目的地。
解决vue keepAlive 二次进入页面显示首次缓存问题
问题场景： 当某个带有筛选条件查询列表的页面需要进行缓存，以便不再需要重复进行选择或者输入筛选条件的时候，我们就可以利用keepAlive来进行缓存，但keepAlive也存在着一些坑，这是需要注意的地方。
如何利用keepAlive进行缓存
1、在路由meta内定义keepAlive，来设置需要被缓存的页面
meta: { keepAlive: true }
ture: 需要缓存的路由；false:不需要缓存的路由
2、判断router-view
被keep-alive包裹的为需要缓存的页面，这样我们就可以通过keepAlive来切换哪些页面需要缓存，哪些不需要缓存。
3、进入详情页面缓存，否则不缓存
路由守卫钩子 beforeRouteLeave 离开页面路由的时候出发； 当离开缓存页面，进入详情页面的时候，我们将缓存页面keepAlive设置true，如果离开缓存页面，不是进入详情页面的时候，我们设置为false，不进行缓存。
这是最基本的缓存设置，但是keepAlive也留下了一个大坑。
keepAlive二次进入页面显示首次缓存问题
第一次从缓存页面进入详情页再返回到缓存页面的时候，页面条件能被正确的缓存下来，但是当我们切换到别的路由，再一次进入该缓存页修改查询条件，并进入详情后返回缓存页，此时缓存的是页面状态是第一次进入该页面的时候的状态，也就是说，第二次进入页面的时候，该缓存读取的是第一次的缓存，这就非常的坑了。 所以通过下面的刷新缓存路由的方式来解决这个问题。
1、调整 router-view
定义一个isRouterAlive变量，用来刷新keep-alive;通过provide向下面子孙组件们暴露一个reload方法，用来刷新缓存。
2、设置缓存
子组件注册inject: ['reload'] 方法，beforeRouteEnter钩子在进入缓存页面的时候通过通过判断路由是否是来自详情页面，如果不是详情页，我们就刷新缓存，如果是详情页，就不做处理。 这样就解决了，只要是路由进入过别的页面(非详情页面)，我们就刷新缓存，这样就不会出现二次进入的时候，显示的是第一次的缓存状态，同时从详情页返回后正常显示缓存数据。
现在您已经了解了如何设置和使用路由器和无线网络，开始享受更好的上网体验吧！
