vue多tab使用keep-alive缓存时复用单个组件支持按参数缓存和清除缓存

秦羽 2023-01-29 PM 150℃ 0条

## 背景
vue2使用keep-alive缓存多个tab时，发现keep-alive对每个组件只能根据name缓存一次，单个组件复用的情况（如`/path1?page=new`和`/path1?page=home`）无法适用。

## 初步解决

增加key为`$route.fullPath`可以单组件复用问题，但清除指定页面缓存等后续操作无法实现。

```
<keep-alive>
    <router-view :key="$route.fullPath"></router-view>
</keep-alive>
```
详情见另一篇文章：https://www.qinyu.cc/archives/231.html

## 最终方案

查询资料尝试了其他几种方式也有问题，最终觉得只能重写keep-alive组件能满足需求

找到了个别人封装好的可以直接使用（感谢）：https://github.com/xiaowoxiaowo/all-keep-alive

备用链接（fork防止失效）：https://github.com/shanghaobo/all-keep-alive

最终使用代码如下：

- view部分
```
 <all-keep-alive :include="caches">
 	<router-view :key="$route.fullPath" v-if="!isRefreshing"></router-view>
 </all-keep-alive>
```
- js部分
```
 watch: {
    $route(to, from) {
      if (to.path !== from.path || to.query !== from.query) {
        // 进入页面后缓存
        if (!this.caches.includes(to.fullPath)) {
          this.caches.push(to.fullPath);
        }
      }
    }
  },
methods:{
 	// 刷新当前tab
    refreshNowTab() {
      this.isRefreshing = true;
      let index = this.caches.indexOf($route.fullPath);
      this.caches.splice(index, 1);

this.$nextTick(() => {
        this.caches.push($route.fullPath);
        this.isRefreshing = false;
      });
    },
    // 关闭tab清除缓存
    closeTabHandle(tab) {
      let fullPath = "/" + tab.menu_path + "?mid=" + tab.menu_id + this.key;
      let index = this.caches.indexOf(fullPath);
      this.caches.splice(index, 1);
    }
}
```

## 参考

https://juejin.cn/post/6876100071826391054
https://github.com/xiaowoxiaowo/all-keep-alive
https://segmentfault.com/a/1190000042684156?sort=votes

标签: keepAlive, keep-alive, vue页面缓存

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/232.html

上一篇 vue中keep-alive缓存带参数页面

下一篇 Django使用update更新数据无法触发post_save信号的解决方法

vue多tab使用keep-alive缓存时复用单个组件支持按参数缓存和清除缓存

评论啦~

栏目分类

标签云

友情链接申请

vue多tab使用keep-alive缓存时复用单个组件支持按参数缓存和清除缓存

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请