基本用法
keep-alive组件能够对页面进行缓存操作,在一些开发场景上较为常用,include为需要缓存的组件name,exclude为不缓存的组件name,tips:缓存组件需指定name值,并且要和include的对应,否则缓存不成功
transition组件为动画过渡组件,用于路由切换时动画效果的过渡(不加过渡效果,切换页面会出现上一个路由页面内容的残影,体验不好)
<transition name="fade" mode="out-in">
<keep-alive :include="['a','b']" :exclude="[]">
<router-view />
</keep-alive>
</transition>
扩展问题
在一些时候需要更新这个缓存页面或里面的某些组件,我这里分享三种解决方案
1、配合使用activated和deactivated生命周期
2、keep-alive组件的include和exclude属性的应用,可以使用vuex做状态管理更新
3、把需要更新的部分(例如表格数据或一些下拉数据)写入vuex中,然后通过vuex更新数据