vue-router 切换tab标签关闭时缓存问题方案

问题：使用keepalive后关闭tab标签后再打开，打开的是缓存的页面，参考上一篇关于tab的笔记

要求：切换时打开的是缓存的页面，关闭后重新打开的是新的请求的页面

解决方法

使用keep-alive的include属性

根组件

<keep-alive :include="catch_components">
              <router-view ></router-view>
            </keep-alive>

computed:{
    catch_components(){
      console.log(this.$store.state.catch_components)
      return this.$store.state.catch_components
    }
  },

state.js组件 

在router入口页面加上 requireLogin: true // 需要被缓存 false则不需要，此处name必须与组件内的name属性一致 export default { name:'order'}

当点关闭标签的时候如果不想当前页面缓存 加上

 以上实现了删除tab,重新打开时重新请求。切换tab时，不会重新发起请求

参考：1.vue 动态设置keepalive缓存，手动清除缓存_@梢的博客-CSDN博客

2.vue-router 切换tab标签关闭时缓存问题方案_hlvy-CSDN博客_vue 关闭tab时清空keepalive缓存