概述
在现代 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
)中&#