vue页签模式+keep-alive解决关闭页签后缓存组件未销毁问题

1.简介

 

vue使用页签模式，组件使用keep-alive缓存，发现页签关闭后缓存组件未销毁，只是出于非活动状态

 

2.解决

 

使用keep-alive的include属性，这个属性包含了缓存组件的名称，可以将其赋值为动态属性

页签store

export default { state: { current: layui.data('tag').current || {},//当前页签 list: layui.data('tag').list || []//页签列表 }, getters:{ /** 标签名称列表 */ tagNames (state) { return state.list.map(function(tag){return tag.name}) } } } list是页签对象列表tagNames为页签名称列表，即要缓存的页签组件名称

 

<keep-alive v-if="isRouterAlive" :include="tagNames"> <router-view ></router-view> </keep-alive> ...mapGetters({ tagNames:'tagNames' }) 这样就保证了移除tag后，相应的组件名称也不会被缓存