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

概述

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

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

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

一、使用 keep-alive 缓存路由

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

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

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

在左侧菜单栏组件（例如 MenuTree.vue）中，我们需要监听用户的点击事件，以便在点击某个菜单项时添加新的页签。同时，我们也需要将该组件的 name 添加到 cachedViews 数组中，以标记该组件应被缓存。请注意，这里的 name必须与页面组件name、路由