解构 Vue Element Admin：Navbar 与 TagsView，后台顶部的“黄金搭档” ✨

原创于 2025-06-30 20:16:00 发布 · 704 阅读

CC 4.0 BY-SA版权

文章标签：

124 篇文章

订阅专栏

解构 Vue Element Admin：`Navbar` 与 `TagsView`，后台顶部的“黄金搭档” 🤝

大家好！在探索优秀的后台框架如 Vue Element Admin 时，我们常常会对其精致的布局和流畅的交互印象深刻。其中，页面顶部的导航栏 (Navbar) 和标签页视图 (TagsView) 更是我们每天都要打交道的老朋友。

它们看起来挨得很近，似乎融为一体，但实际上是两个功能迥异、各司其职的核心组件。你是否曾想过：

今天，就让我们拿起“手术刀”，对这对“黄金搭档”进行一次深度解剖，看看它们是如何共同撑起一个现代化后台系统的顶部导航体验的！

对比项	`Navbar.vue` (导航栏)	`TagsView.vue` (标签页视图)	关系 (Relationship)
定位与角色	全局工具栏 & 状态展示器	会话历史管理器 & 快速切换器	`Navbar` 提供静态的、全局性的入口，而 `TagsView` 提供动态的、基于用户行为的导航。
核心功能	汉堡包菜单、面包屑导航、用户头像、退出登录、全屏等。	显示所有已访问页面的标签、在标签间切换、关闭/刷新标签。	`Navbar` 负责“你在哪”，`TagsView` 负责“你去过哪”。
数据来源	主要来自 `UserModule` 和 `AppModule` (Vuex)，获取用户名、头像、侧边栏状态等。	主要来自 `TagsViewModule` (Vuex)，获取和管理 `visitedViews` (已访问页面) 列表。	都依赖 Vuex 进行状态管理，但关心的是不同模块的数据。
与路由交互	被动响应 & 主动触发：面包屑被动地根据 `$route` 生成；用户菜单中的链接会主动触发 `this.$router.push()`。	主动监听 & 主动触发：通过 `@Watch('$route')` 主动监听路由变化来添加新标签；点击标签或关闭标签时也会主动触发路由跳转。	`TagsView` 与路由的交互更紧密、更动态，是其核心功能的驱动力。

一句话总结: Navbar 是你后台系统的“仪表盘”，提供全局状态和固定操作；而 TagsView 则是你的“浏览器历史记录”，记录你的工作足迹并让你快速穿梭。

Navbar 就像飞机的驾驶舱，它提供了你需要时刻关注的信息和随时可能用到的全局操作。

汉堡包菜单 (<hamburger>): 点击它，会调用 AppModule.ToggleSideBar()，通过 Vuex 修改侧边栏的展开/收起状态。
面包屑导航 (<breadcrumb>): 它会读取当前路由 $route 的 matched 数组，动态生成从根路径到当前页面的层级导航，例如 首页 / 产品管理 / 产品列表。
右侧菜单:
- 用户头像和下拉菜单: 展示从 UserModule 获取的用户名和头像。下拉菜单中的“退出登录”会调用 UserModule.LogOut() 并通过 this.$router.push() 跳转到登录页。
- 全屏、通知等工具: 提供独立于具体页面的全局功能。

Navbar 的特点是相对稳定，它的内容不怎么随你访问的页面而剧烈变化。

TagsView 则是你的个人工作台，它记录了你打开的所有“文件”（页面）。

监听路由 (@Watch('$route')): 这是 TagsView 的“耳朵”。一旦监听到 URL (Uniform Resource Locator, 统一资源定位符) 变化，它就知道你打开了一个新页面。
调用 Vuex (TagsViewModule.addView()): 监听到变化后，它会立即通知 Vuex 的 TagsViewModule：“嘿，把这个新页面 (this.$route) 加到 visitedViews 列表里！”
响应式渲染 (v-for): TagsView 的模板通过 v-for 循环 visitedViews 数组。当 Vuex 中的数组一改变，Vue 的响应式系统就会立刻通知 TagsView 更新视图，新的标签就神奇地出现了。
关闭与切换: 点击标签或关闭按钮，会触发类似 closeSelectedTag() 的方法，这些方法再次通过调用 Vuex Action 来修改 visitedViews 数组，并可能触发 this.$router.push() 来跳转到另一个页面。