vue中keep-alive的include、exclude两个属性--避坑 和使用2个钩子函数activated、deactivated

keep-alive用法简介：我们在切换路由的时候，上一个页面就会被销毁，新的页面也会被创建，keep-alive它可以缓存组件，防止组件销毁，也就是说，我们在进行路由切换时，上次访问的页面数据依然存在，不会进行销毁。

普通用法：

只需要用keep-alive把需要缓存的组件包裹即可：

include属性：字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude属性： 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

这里的属性值填什么呢？ 避坑！避坑！避坑！

在新创建的组件的这个位置  写name名称，在路由实例中配置路由的时候命名是不对的，应该是组件的名称

找对了name，include属性，exclude属性  ，也就不用多说了。

activated、deactivated两个钩子函数

有keep-live才会触发这两个钩子函数，也是写在组件内部的，当进入组件时activated触发，离开时deactivated  触发，注意keep-alive包裹的组件切换时进行的就不再是组件销毁了。

喜欢的话点赞收藏，欢迎点击头像查看更多内容！