Vue——Vue 面包屑导航实现

背景问题需要实现页面面包屑导航。方案思考根据当前路由路径生成面包屑。具体实现面包屑组件!-- components/Breadcrumb.vue -- template el-breadcrumb classapp-breadcrumb separator/ transition-group namebreadcrumb el-breadcrumb-item v-for(item, index) in breadcrumbs :keyitem.path index span v-ifitem.redirect noredirect || index breadcrumbs.length - 1 classno-redirect {{ item.meta?.title }} /span a v-else click.preventhandleLink(item) {{ item.meta?.title }} /a /el-breadcrumb-item /transition-group /el-breadcrumb /template script setup import { ref, watch } from vue import { useRoute, useRouter } from vue-router const route useRoute() const router useRouter() const breadcrumbs ref([]) // 获取面包屑 const getBreadcrumbs () { const matched route.matched.filter(item item.meta item.meta.title) const first matched[0] // 如果第一个路由不是首页则添加首页 if (first first.path ! /) { matched.unshift({ path: /, meta: { title: 首页 } }) } breadcrumbs.value matched.filter(item { return item.meta item.meta.title item.meta.breadcrumb ! false }) } // 处理面包屑链接 const handleLink (item) { const { redirect, path } item if (redirect) { router.push(redirect) return } router.push(path) } watch(() route.path, () { getBreadcrumbs() }, { immediate: true }) /script style scoped .app-breadcrumb.el-breadcrumb { display: inline-block; font-size: 14px; line-height: 50px; margin-left: 8px; } .no-redirect { color: #97a8be; cursor: text; } /style面包屑工具函数// utils/breadcrumb.js// 面包屑处理工具exportclassBreadcrumbUtils{// 生成面包屑路径staticgenerateBreadcrumb(route,routes){constmatched[]this.findRoutePath(route,routes,matched)returnmatched}// 查找路由路径staticfindRoutePath(targetRoute,routes,matched[]){for(constrouteofroutes){matched.push(route)if(route.nametargetRoute.name){returntrue}if(route.children){if(this.findRoutePath(targetRoute,route.children,matched)){returntrue}}matched.pop()}returnfalse}// 格式化面包屑staticformatBreadcrumb(breadcrumbs,localezh-CN){returnbreadcrumbs.map((item,index)({...item,title:item.meta?.title||item.name,path:item.path,isLast:indexbreadcrumbs.length-1}))}}