第十七节面包屑导航组件适配多级嵌套路由本节目标实现页面顶部面包屑自动跟随当前路由变化支持多级路由自动生成层级路由切换自动更新和 layout 布局融合。文件路径src/layout/components/Breadcrumb.vue步骤 1新建面包屑组件 Breadcrumb.vuetemplate div classbreadcrumb-wrap !-- element-plus面包屑组件 -- el-breadcrumb separator/ !-- 遍历面包屑数组 -- el-breadcrumb-item v-foritem in breadcrumbList :keyitem.path :to{ path: item.path } {{ item.title }} /el-breadcrumb-item /el-breadcrumb /div /template script setup import { computed } from vue import { useRoute } from vue-router const route useRoute() /** * 计算属性生成面包屑数组 * route.matched 路由匹配数组包含当前路由所有父级路由 */ const breadcrumbList computed(() { // matched匹配到的完整路由链从根到当前页面 return route.matched.filter(item { // 过滤掉没有meta.title的路由不渲染 return item.meta item.meta.title }).map(item { return { path: item.path, title: item.meta.title } }) }) /script style scoped .breadcrumb-wrap { padding: 0 15px; height: 50px; display: flex; align-items: center; background: #fff; } /style核心原理$route.matched路由自带属性会拿到当前页面全部父级路由不用自己递归处理菜单数据路由跳转自动更新。步骤 2在布局主文件 layout/index.vue 引入面包屑打开src/layout/index.vuetemplate div classlayout-container !-- 侧边栏 -- Sidebar classsidebar / div classmain-wrapper !-- 顶部导航栏 -- div classnavbar !-- ✅引入面包屑组件 -- Breadcrumb / div classnavbar-right !-- 折叠按钮、用户头像、退出登录原有代码保留 -- /div /div !-- 主内容区域 -- 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 // ...其余原有导入代码全部保留 /script style /* 原有layout样式不变 */ /style步骤 3测试效果保存全部文件重启pnpm dev重新登录进入工作台面包屑显示/ 工作台打开系统管理 → 用户列表面包屑自动生成/系统管理 /用户列表切换菜单面包屑实时跟随变化点击面包屑可以跳转到对应父页面。常见坑路由必须配置meta:{ title:xxx }没有 title 的路由不会出现在面包屑Layout 布局路由不需要写 title子路由写 title 即可如果面包屑不更新确认组件使用computed监听route.matched不要写死固定数组。拓展和标签页TagsView联动小说明下一节我们就做标签页组件点击菜单自动新增标签页支持关闭标签。
