Vue（七）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 tab页面切换 数据缓存 tab切换不请求接口 tab切换不刷新数据

目录

前言

tab页面切换不刷新数据 数据缓存

1. Vue前端 tab页面切换 图例

1.1 tab页面切换不刷新数据 数据缓存 需求分析

2. tab页面切换不刷新数据 数据缓存 代码和实现分析

2.1 views/Home.vue 设置缓存所有页面

2.2 Vue官网 KeepAlive部分内容

    2.2.1 Vue缓存 包含/排除

    2.2.2 Vue缓存 ​最大缓存实例

3. 关于缓存知识 拓展

3.1 为什么使用前端缓存？

3.2 常见缓存层级 图例

3.3 前端缓存可能存在的弊端 

---

前言

    基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目，tab页面切换 数据缓存 tab切换不请求接口 tab切换不刷新数据，前端数据缓存代码和实现方法示例讲解。单独花一篇讲解是因为之前遇到问题的时候搜索博文讲解不完善不可用概率很高，最终去官网开文档后尝试解决，再此列举案例说明讲解。

tab页面切换不刷新数据 数据缓存

1. Vue前端 tab页面切换 图例

1.1 tab页面切换不刷新数据 数据缓存 需求分析

1、新开页面，请求数据
2、tab切换走缓存数据
3、关闭tab，再次打开tab走缓存数据
4、刷新（F5）当前页面再次点击tab，请求数据

2. tab页面切换不刷新数据 数据缓存 代码和实现分析

2.1 views/Home.vue 设置缓存所有页面

<div class="content-box" :class="{ 'content-collapse': collapse }">
	<v-tags></v-tags>
	<div class="content">
		<router-view v-slot="{ Component }