在vue中实现页面缓存
只需要添加keep-alive标签
例如下方:
<keep-alive>
<router-view/>
</keep-alive>
接下来我们就需要来聊聊keep-alive标签对vue生命周期的影响
被keep-alive包裹的组件,加载过的页面,再次进入时,是不会执行页面第一次进入时的部分生命周期函数。并且被keep-alive包裹的组件会新增两个生命周期函数activated和deactivated。
如果有指定要求缓存某些组件以及一些特定条件的时候,就需要使用属性include,exclude配合vue-router或者其他进行动态缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
exclude优先级大于include。
在我目前的项目中,后面如果需要使用更多规则的话,我会继续贴出来记录。