Vue keep-alive本地路由缓存和图片懒加载
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue keep-alive本地路由缓存和图片懒加载相关的知识,希望对你有一定的参考价值。
参考技术A 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 组件
一、简介
keep-alive是Vue提供的一个抽象组件,可以用来对组件和路由进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。
(1) keep-alive 缓存路由
<keep-alive>
<router-view />
</keep-alive>
被缓存的路由,第一次进入页面的时候会调用 created() 方法,第二次进入页面时就不会再调用 created() 方法了,因为页面被缓存起来了。那么我们如果页面改动了,怎么刷新页面呢?虽然 created() 方法不会被调用,但是activated、deactivated这两个生命周期钩子函数会被执行。也就是我们的接口可以写在 activated() 方法中。
(2) keep-alive 缓存组件
<keep-alive>
<loading></loading>
</keep-laive>
被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处。
二、缓存指定的组件
在开发的时候,往往不需要缓存所有的路由或组件,那么怎么设置缓存指定的路由和组件呢?
2.1 利用include、exclude属性
include属性表示只有name属性为bookLists,bookLists的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存。
<keep-alive include="bookLists,bookLists">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>
2.2 利用meta属性
export default[
path:'/',
name:'home',
components:Home,
meta:
keepAlive:true //需要被缓存的组件
,
path:'/book',
name:'book',
components:Book,
meta:
keepAlive:false //不需要被缓存的组件
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->
以上是关于Vue keep-alive本地路由缓存和图片懒加载的主要内容,如果未能解决你的问题,请参考以下文章