0
点赞
收藏
分享

微信扫一扫

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

朱小落 2022-02-14 阅读 133

问题:使用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缓存

举报

相关推荐

0 条评论