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生命周期函数。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
评论
最新文章
如何在项目中使用一个自定义的npm模块(如何使用一个魔改后的npm模块)
0点赞
·
1评论
Debian12 更新系统版本(目前更新至12.5版本)
0点赞
·
0评论
Nestjs CORS配置和生产环境处理
1点赞
·
0评论
Debian12 SSH连接报错:Error Handshake failed no matching host key format
0点赞
·
0评论
Prisma 使用MongoDB创建数据时报错:Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.
0点赞
·
0评论
目录
暂无目录
暂无评论数据