KeepAlive 简单使用，及手动去除内容存储

项目需求：使用keep-alive 实现项目中部分页面的存储功能，当关闭页面需求清除掉缓存，tab切换页面时需要保留内容进行缓存；

问题：关闭后，重新打开页面，内容仍然存在，需要强制清除keep-alive 保留的缓存内容；

效果如下：

实过程及思路：部分代码

1、keep-alive 使用保留缓存实现：

router配置：

或者 

    <keep-alive>
      <router-view v-if="$route.meta.keepalive" :key="key" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive" :key="key" />

关闭菜单操作：

pageDelete(id, tag) {
  this.$store.commit('tagBar/tagDelete', id)
}

store 存储设置：

在需要的页面中处理设置；

//从store 去除删除的内容标识；
import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['closeTagName'])
  },

/******** 其他内容略过 ********/

// 路由离开，处理需要销毁的内容
beforeRouteLeave(to, from, next) {
    if (this.closeTagName === '添加客户') {
      this.$router.history.current.meta.keepalive = false
      // 设置下一个路由的 meta
      to.meta.keepAlive = false // 不缓存
      this.$store.commit('tagBar/setCloseTagName')
    } else {
      this.$router.history.current.meta.keepalive = true
      // 设置下一个路由的 meta
      to.meta.keepAlive = true // 不缓存
    }
    next()
  }

以上内容仅供参考；