第十八节TagsView 动态标签页组件本节目标实现页面顶部标签页点击菜单自动新增标签当前标签高亮支持关闭单个标签、关闭其他、关闭全部关闭后自动跳转到相邻标签。文件路径src/layout/components/TagsView.vue步骤 1新建标签页状态管理src/stores/tagsView.jsimport { defineStore } from pinia export const useTagsViewStore defineStore(tagsView, { state: () ({ // 已打开的标签页列表 visitedViews: [] }), actions: { // 新增标签 addView(view) { // 去重path 相同不重复添加 if (this.visitedViews.some(v v.path view.path)) return this.visitedViews.push({ path: view.path, name: view.name, title: view.meta?.title || 未命名, meta: view.meta || {} }) }, // 删除指定标签 delView(view) { const index this.visitedViews.findIndex(v v.path view.path) if (index -1) { this.visitedViews.splice(index, 1) } // 返回删除后应该跳转的目标标签 return this.visitedViews[index] || this.visitedViews[index - 1] || null }, // 关闭其他标签 delOthersViews(view) { this.visitedViews this.visitedViews.filter(v v.path view.path) }, // 关闭全部标签 delAllViews() { this.visitedViews [] } } })步骤 2新建标签页组件src/layout/components/TagsView.vuetemplate div classtags-view-wrap div classtags-view-scroll el-tag v-fortag in visitedViews :keytag.path :typeisActive(tag) ? primary : info :closabletag.path ! /dashboard/index effectplain classtag-item clickhandleClick(tag) closehandleClose(tag) {{ tag.title }} /el-tag /div !-- 右键菜单关闭其他 / 关闭全部 -- el-dropdown triggerclick classtags-view-actions commandhandleCommand span classactions-btn操作 ▾/span template #dropdown el-dropdown-menu el-dropdown-item commandcloseOthers关闭其他/el-dropdown-item el-dropdown-item commandcloseAll关闭全部/el-dropdown-item /el-dropdown-menu /template /el-dropdown /div /template script setup import { computed, watch } from vue import { useRoute, useRouter } from vue-router import { useTagsViewStore } from /stores/tagsView const route useRoute() const router useRouter() const tagsViewStore useTagsViewStore() const visitedViews computed(() tagsViewStore.visitedViews) // 监听路由变化自动添加标签 watch( () route.path, () { if (route.meta?.title) { tagsViewStore.addView(route) } }, { immediate: true } ) // 判断当前标签是否激活 const isActive (tag) tag.path route.path // 点击标签跳转 const handleClick (tag) { if (tag.path ! route.path) { router.push(tag.path) } } // 关闭标签 const handleClose (tag) { const nextView tagsViewStore.delView(tag) // 如果关闭的是当前页跳转到相邻标签 if (tag.path route.path) { if (nextView) { router.push(nextView.path) } else { router.push(/dashboard/index) } } } // 下拉菜单操作 const handleCommand (command) { if (command closeOthers) { tagsViewStore.delOthersViews(route) } else if (command closeAll) { tagsViewStore.delAllViews() router.push(/dashboard/index) } } /script style scoped .tags-view-wrap { display: flex; align-items: center; height: 36px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e4e7ed; } .tags-view-scroll { flex: 1; display: flex; gap: 6px; overflow-x: auto; } .tag-item { cursor: pointer; flex-shrink: 0; } .tags-view-actions { margin-left: 12px; } .actions-btn { cursor: pointer; font-size: 13px; color: #606266; } /style步骤 3在 layout/index.vue 中引入 TagsViewtemplate div classlayout-container Sidebar classsidebar / div classmain-wrapper !-- 顶部导航 -- div classnavbar Breadcrumb / !-- 右侧用户信息 -- /div !-- ✅ 标签页放在面包屑下方、主内容上方 -- TagsView / main classapp-main router-view v-slot{ Component } component :isComponent / /router-view /main /div /div /template script setup import Sidebar from ./components/SidebarMenu.vue import Breadcrumb from ./components/Breadcrumb.vue import TagsView from ./components/TagsView.vue /script✅ 测试流程保存全部文件重启pnpm dev重新登录默认工作台标签已存在且不可关闭点击「系统管理 → 用户列表」自动新增「用户列表」标签并高亮点击标签可切换页面点击 × 可关闭标签关闭当前标签后自动跳转到相邻标签操作下拉菜单可关闭其他 / 关闭全部❗ 高频踩坑标签重复添加addView里必须按path去重否则每次切换都会新增重复标签工作台标签不可关闭closabletag.path ! /dashboard/index首页固定保留watch 必须加immediate: true首次进入页面时也要添加当前路由的标签关闭当前标签后跳转逻辑delView返回相邻标签没有则跳回首页