当前位置：首页 > news >正文

后台通用tag面包屑

news 2025/7/4 9:59:57

思路：要实现点击左侧菜单栏，页面跳转且显示面包屑(本文用的是TS+Vue3)
功能点：

最多显示5个标签
超过5个时，自动移除最早的标签
至少保留1个标签
支持标签关闭功能

首先在store.ts 处理路由（点击过的路由，当前的路由信息）,只需要用到增加和删除tag逻辑
addVisitedView：去和现在项目配置的路由数组做匹配（path），获取点击过的路由信息，存入tag内，然后判断如果访问过的路由中已经存在该路由，则更新当前路由，不重复添加标签，return掉，如果没有存在该路由，则添加新路由再更新当前路由，加超过5个时，自动移除最早的标签。
deleteVisitedView：查找要删除的路由在数组中的索引，如果找到了该路由（index > -1）则删除它

import { defineStore } from 'pinia'
// 定义访问过的路由
interface TagView {title: stringpath: string
}
export const useMenuStore = defineStore('menu', {state:()=>({visitedViews: [] as TagView[], // 访问过的路由currentView: null as TagView | null // 当前路由}),actions: {// 添加访问过的路由addVisitedView(route: any) {const menuItem = this.menuList.find(item => item.path === route.path)if (!menuItem) return// 定义访问过的路由const tag: TagView = {title: menuItem.title,path: route.path}// 如果访问过的路由中已经存在该路由，则更新当前视图，不重复添加标签if (this.visitedViews.some(v => v.path === tag.path)) {this.currentView = tagreturn}// 添加到访问过的路由this.visitedViews.push(tag)// 更新当前路由this.currentView = tag// 如果访问过的路由超过5个，则删除第一个if (this.visitedViews.length > 5) {this.visitedViews.shift()}},// 删除访问过的路由deleteVisitedView(path: string) {const index = this.visitedViews.findIndex(v => v.path === path)// 如果访问过的路由中存在该路由，则删除if (index > -1) {this.visitedViews.splice(index, 1)}},}
})

标签组件页面显示：
使用watch去监听路由的改变，来动态添加路由，调用store里面的addVisitedView和deleteVisitedView来进行增加删除，然后这里的业务逻辑只处理页面的路由跳转
关闭标签的逻辑：如果删除的不是当前选中的标签，则直接删除
如果删除的选中的标签

如果是首，则到当前列表的第一个
如果是尾，则到当前列表的最后一个
如果是中间的，则是当前列表的后一个标签

<template><div class="bread-container"><el-tag v-for="tag in visitedViews" :key="tag.path" :closable="visitedViews.length > 1":effect="route.path === tag.path ? 'dark' : 'plain'" @click="handleTagClick(tag)"@close="handleCloseTag(tag)" class="tag-item" size="large">{{ tag.title }}</el-tag></div>
</template>
<script setup lang="ts">
import { watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMenuStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const menuStore = useMenuStore()
const { visitedViews } = storeToRefs(menuStore)
// 定义 TagView 类型
interface TagView {title: stringpath: string
}// 监听路由变化时添加到访问记录
watch(() => route.path,() => { menuStore.addVisitedView(route) },{ immediate: true })// 点击标签
const handleTagClick = (tag: TagView) => {router.push(tag.path)
}
// 关闭标签
const handleCloseTag = (tag: TagView) => {menuStore.deleteVisitedView(tag.path)if (route.path === tag.path) {// 先找到要关闭标签的索引const index = menuStore.visitedViews.findIndex(v => v.path === tag.path)//默认关闭的不是首尾标签let nextTag = menuStore.visitedViews[index + 1]if (index === 0) {// 如果关闭的是第一个标签，跳转到新的第一个标签nextTag = menuStore.visitedViews[1]} else if (index === menuStore.visitedViews.length - 1) {// 如果关闭的是最后一个标签，跳转到前一个标签nextTag = menuStore.visitedViews[menuStore.visitedViews.length - 2]}router.push(nextTag.path) }
}
</script>
<style scoped lang="scss">
.bread-container {margin-top: 20px;.tag-item {margin-left: 12px;font-size: 16px;}
}
</style>