TagsView 与缓存

目的与范围

本文档将介绍 vue-element-admin 中的 TagsView 组件和路由缓存系统。TagsView 提供了一个基于选项卡（tab）的导航界面，用于显示和跟踪已访问的路由，而缓存机制则保留组件状态，以提高视图之间的导航性能。这两项功能共同增强了用户体验，使用户能够快速导航到常用页面，同时不丢失其状态。

1. TagsView 概览

TagsView 是一个导航组件，显示为主导航栏下方的标签行，代表用户已访问的路由。它充当视觉化的导航历史记录，并提供对最近使用页面的快速访问。

来源: src/layout/components/TagsView/index.vue1-26 src/store/modules/tagsView.js1-19

2. 架构与组件

TagsView 系统主要由两部分组成：

渲染标签的 UI 组件
管理已访问和已缓存视图状态的 Vuex 存储模块

来源: src/layout/components/TagsView/index.vue1-26 src/store/modules/tagsView.js1-4

2.1 Vuex 存储模块

tagsView Vuex 模块管理两个关键数组：

visitedViews：包含用于渲染标签的完整路由对象
cachedViews：仅包含路由名称，用于使用 <keep-alive> 进行组件缓存

State:
  - visitedViews: Array of route objects (for UI display)
  - cachedViews: Array of route names (for <keep-alive> component)

Mutations:
  - ADD_VISITED_VIEW: Add a route to visitedViews
  - ADD_CACHED_VIEW: Add a route name to cachedViews
  - DEL_VISITED_VIEW: Remove a route from visitedViews
  - DEL_CACHED_VIEW: Remove a route name from cachedViews
  - DEL_OTHERS_VISITED_VIEWS: Remove all routes except current and affixed
  - DEL_OTHERS_CACHED_VIEWS: Remove all cached routes except current
  - DEL_ALL_VISITED_VIEWS: Remove all routes except affixed
  - DEL_ALL_CACHED_VIEWS: Clear all cached routes
  - UPDATE_VISITED_VIEW: Update a visited view

来源: src/store/modules/tagsView.js1-67

2.2 TagsView 组件

TagsView 组件根据 Vuex 存储中的 visitedViews 数组渲染标签，并提供交互功能。

Main Features:
  - Displays tabs for each visited route
  - Shows active state for current route
  - Provides close button for each tag (except affixed)
  - Middle-click to close a tag
  - Right-click context menu with operations
  - Horizontal scrolling for many tags

来源: src/layout/components/TagsView/index.vue1-26 src/layout/components/TagsView/index.vue33-68

3. 缓存机制

缓存系统利用 Vue 内置的 <keep-alive> 组件，在导航路由之间保留组件状态。

3.1 视图缓存如何工作

来源: src/store/modules/tagsView.js15-20 src/components/SizeSelect/index.vue33-53

3.2 缓存控制

路由可以通过路由配置中的 meta.noCache 属性来控制其缓存行为。

Route with caching (default):
{
  path: '/example',
  name: 'Example',
  component: Example,
  meta: { title: 'Example' }
}

Route without caching:
{
  path: '/example',
  name: 'Example',
  component: Example,
  meta: { 
    title: 'Example',
    noCache: true 
  }
}

来源: src/store/modules/tagsView.js15-19

4. 常用操作

TagsView 系统提供了几种用于管理标签和缓存视图的操作：

操作	描述	实现
添加标签	访问路由时添加新标签	`addView` action
关闭标签	删除单个标签	`closeSelectedTag` 方法
关闭其他	只保留当前标签	`closeOthersTags` 方法
关闭全部	删除所有标签	`closeAllTags` 方法
刷新视图	重新渲染当前视图	`refreshSelectedTag` 方法