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后，相应的组件名称也不会被缓存