Vue实现一个带有缓存功能的Tab页签功能

<!-- 缓存路由 -->
<keep-alive :include="cacheViews">
    <router-view></router-view>
</keep-alive>

// 点击左侧菜单时添加tab页签，添加缓存页面
        const findIndex = this.existedTabs.findIndex(v => {
            return v.name == item.name
        })
        if(findIndex == -1) {
            // tab页签中不存在，push进去
            this.existedTabs.push(item);
            this.cacheViews.push(item.name)
        }
        this.$store.commit("saveTabsList", this.existedTabs); // 保存tab标签页
        this.$store.commit("saveCacheViews", this.cacheViews); // 保存需要缓存页面组件

// 关闭tab页签时，删除缓存标记
        const findIndex = this.tabsListArray.findIndex((v) => {
            return v.name == targetName;
        });
 
        if (findIndex > -1) {
            this.tabsListArray.splice(findIndex, 1);
            const findIndexCacheViews = this.cacheViews.indexOf(targetName);
            if (findIndexCacheViews > -1) {
            this.cacheViews.splice(findIndex, 1);
            }
        }
        this.$store.commit("saveTabsList", this.tabsListArray);
        this.$store.commit("saveCacheViews", this.cacheViews);
        if (targetName == this.activename) {
        // 当前菜单，跳转至后面/前面一个菜单
        if (findIndex < this.tabsListArray.length) {
          this.$router.push({
            name: this.tabsListArray[findIndex].name,
          });
        } else {
          this.$router.push({
            name: this.tabsListArray[findIndex - 1].name,
          });
        }
      }