Vue 实现 动态添加Tab 页签及页面缓存功能

概述

在现代 Web 应用中，Tab 页签功能是非常常见的一种交互模式。它可以帮助用户在不同的视图间快速切换，而不会丢失当前视图的状态。为了进一步提升用户体验，我们可以通过 keep-alive 组件来缓存已经打开的视图，这样即使用户离开并再次回到这个视图，也可以看到之前的状态。

本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能。

效果实现

点击左侧菜单栏，添加tab页及页面缓存，关闭tab页，删除页面缓存

功能实现（只展示核心代码）

一、使用 keep-alive 缓存路由

为了实现页面缓存，我们需要使用 keep-alive 组件。首先，在 App.vue 中引入 keep-alive 并将其包裹在 <router-view> 外面。同时，我们可以使用 include 属性来指定哪些组件应该被缓存。

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

二、点击左侧菜单，添加页签并添加缓存标记

在左侧菜单栏组件（例如 MenuTree.vue）中&#