木灵鱼儿
阅读:4401
vue keep-alive 白名单(include)和黑名单(exclude)
keep-alive作为vue的缓存标签,有时候也会遇到一些问题,比如,某些页面我们不想缓存,以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。
但现在不一样了,以前的那种方法并不适合现在了,因为keep-alive自带了黑名单和白名单,在白名单中的路由或者组件将会缓存,黑名单中的则不会缓存。
例子
<keep-alive include="a,b" exclude="c,d">
<router-view/>
</keep-alive>
多个组件用英文逗号隔开,单个就写单个。
那么这个abcd的值哪里来的呢?
这个值就是组件的name属性,他不是路由的那个name,也不是meta里面的自定义属性,而是和data,computed这些同级的name属性。
export default {
name:'a', // include 或 exclude所使用的name
data () {
return{
}
},
}
至此完毕,测试极度好用,可以解决某些页面切换的时候,子页面滚动条没有到顶部,虽然也有其他方法处理这个问题,但是目前用黑名单让他重新绘制会好一些。
如果组件被缓存后created生命周期就只能触发一次,可以使用activated替代,当组件被切换后,会触发deactivated生命周期函数。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面
最近写项目遇到一个问题,很头疼,几天了,问了好些大佬,都没有找到问题的解决方案,但是,最后还是被我找到了,可喜可贺...问题有一个home页,home页里面有router-link元素进行子路由切换,为了减少资源损耗,所以直接使用了keep-alive进行路由页缓存,假设有三个子路由abc,a路由页面有两个子路由a-1和a-2,默认是a-1显示。当我们进入到a路由是,默认显示a-1,然后我们切换到a-2,然后路由push返回到home页,再次进入到a页面时,你会发现,a路由此时显示的a-2而不是a-1,但浏览器地址是a-1的地址,此时,我们可能没办法切换到a-1了。问题图为什么主要因为k...

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同
keep-alive之前也用的比较玄学吧,后来发现,keep-alive只能缓存当前级页面,也就是说:如果keep-alive缓存了A和B这些同级的路由页面或者组件,那是没问题的,但是如果A页面下还有子级路由或者子组件切换,由于嵌套太深,一般是缓存不到的,所以又需要使用一次keep-alive。但是在使用keep-alive的时候遇到一个问题啊,这个问题很烦。虽然keep-alive缓存后,页面的滚动条位置也会相对应的缓存到,但是,正因为这个位置问题,导致A页面如果滚动了,在进入他的子路由页面的时候,子路由页面的滚动条位置会和A页面保持一致,这就很头疼了。找了半天发现一个绝妙的方式:me...
keep-alive 滚动条位置不还原的问题
我想来想去,可能是布局的问题,或者是过渡动画导致的,元素的scroll无法记住。我尝试给html,body,和最外围的父元素隐藏滚动条,然后只给内容的容器元素设置滚动条,结果切换的时候还是无法记住。实在没辙,只能用点强迫办法了,就是在路由出去之前记住当前容器的滚动条高度,然后进入的时候延迟一点点时间,再恢复,为什么要延迟呢,这个主要是因为动画的问题。在需要记住滚动条高度的路由页面使用路由守卫://离开之前保存scrollTop beforeRouteLeave(to, from, next) { //保存滚动条元素div的scrollTop值 this.scrollY = ...