清除vue中keep-alive 组件里的页面缓存_vue keep-alive 清除某一页缓存-优快云博客

本文介绍了在Vue.js应用中使用el-tabs和keep-alive进行页面缓存，以及如何在关闭tab时清理相应缓存的方法。通过监听tab的移除事件，结合Vuex状态管理器来实现缓存页面的动态移除，并在组件挂载时为需要清除缓存的路由添加标识，确保缓存正确清理。

一、业务场景

页面是通过el-tabs遍历出来的
keep-alive标签缓存数据，但是关闭tab，缓存未清理

二、实现方法

el-tabs所在页面

 <el-tabs v-model="activeTab" @tab-remove="removeTab" @tab-click="clickTab">
     <el-tab-pane
              v-for="t in worktabs"
                :key="t.path"
                :label="t.title"
                :name="t.path"
                :closable="t.path !== '/readme'"
                >
     </el-tab-pane>
</el-tabs>

// 方法
removeTab(name) {
    this.$emit('close', {name: name})
},

keep-alive所在页面

<worktab @close="close"/>
<div style="overflow: auto">
    <keep-alive>
        <router-view :key="key" v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-else></router-view>
</div>

// 关闭tab方法
close(event) {
    let list = this.$store.state.worktab.list
    const item = list.find(item => item.path === event.name)
    // 判断需要清空缓存的页面
    if (item.key) {
        const cache = item.key.$vnode.parent.componentInstance.cache
        // 拿到keep-alive的keys
        const key = item.key.$vnode.key
        delete cache[key]
    }
    // 调用状态缓存器里的方法
    this.$store.commit('worktabRemove', event.name)
}

store状态缓存器

// 移除tab
worktabRemove(state, p) {
    // 关闭标签
    const index = state.worktab.list.findIndex(item => item.path === p)
    if (index > -1) {
        // 清理 keep alive - end
        state.worktab.list.splice(index, 1)
        // 返回到前一页
        if (state.worktab.list.length > 0 && index > 0) {
            router.push(state.worktab.list[index - 1].path).catch(err => {
                //console.log(err)
            })
        } else {
            router.push('/readme').catch(err => {
                //console.log(err)
            })
        }
    }
},
    
// 给需要清除缓存的tab赛对象
addKeyRoute(state, p) {
    const index = state.worktab.list.findIndex(s => s.path === p.to)
    state.worktab.list[index].key = p.key
    state.worktab.current = state.worktab.list[index]
},

最后一步，在需要清缓存的组件条件，给对应路由赛对象

mounted() {
    this.$store.commit('addKeyRoute', {to: this.$route.fullPath, key: this})
},