木灵鱼儿

木灵鱼儿

阅读：3957

最后更新：2020/07/07/ 17:15:06

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白名单include黑名单exclude
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 6获得阅读 3957

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 6
文章被阅读 3957

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树