一、前言前面 065-067 攒齐了零件表单/列表/弹窗本篇把零件装进框架经典中后台布局——左侧菜单、顶部工具栏面包屑/全屏/用户下拉、中间内容区。这是所有后台管理系统的第一块积木。二、布局结构与路由设计┌──────────┬───────────────────────────┐ │ │ 面包屑 全屏 | 头像▼ │ ← el-header │ 侧边栏 ├───────────────────────────┤ │ el-menu │ │ │ │ router-view / │ ← el-main └──────────┴───────────────────────────┘ el-aside路由层面用 048 篇的嵌套路由Layout 作为父路由所有业务页面是它的 children——这样切页面时框架不重渲染只有 main 区域换// src/router/index.tsconstroutercreateRouter({history:createWebHistory(),routes:[{path:/login,component:()import(/views/LoginView.vue)},{path:/,component:()import(/layout/Layout.vue),// ★ 框架页redirect:/home,children:[{path:home,component:()import(/views/HomeView.vue),meta:{title:首页}},{path:goods/list,component:()import(/views/GoodsListView.vue),meta:{title:商品列表}}]}]})三、完整布局代码!-- src/layout/Layout.vue -- template el-container classlayout !-- 侧边栏 -- el-aside :widthisCollapse ? 64px : 210px classaside div classlogo{{ isCollapse ? V3 : Vue3 管理系统 }}/div el-menu router !-- ★ 点击菜单项直接按 index 跳路由 -- :default-activeroute.path !-- ★ 绑定当前路径刷新不高亮丢失 -- :collapseisCollapse :collapse-transitionfalse unique-opened background-color#001529 text-color#ffffffa6 active-text-color#fff el-menu-item index/home el-iconHomeFilled //el-icon template #title首页/template /el-menu-item el-sub-menu index/goods template #title el-iconGoods //el-icon span商品管理/span /template el-menu-item index/goods/list商品列表/el-menu-item /el-sub-menu /el-menu /el-aside el-container !-- 顶部栏 -- el-header classheader div classleft el-icon stylecursor: pointer clickisCollapse !isCollapse Expand v-ifisCollapse / Fold v-else / /el-icon !-- 面包屑route.matched 里的 title -- el-breadcrumb separator/ el-breadcrumb-item v-foritem in crumbs :keyitem.path :toitem.path {{ item.meta.title }}/el-breadcrumb-item /el-breadcrumb /div div classright el-icon stylecursor: pointer clicktoggleFullscreen FullScreen / /el-icon el-dropdown commandonCommand span classavatar{{ userStore.name || 游客 }}/span template #dropdown el-dropdown-menu el-dropdown-item commandlogout退出登录/el-dropdown-item /el-dropdown-menu /template /el-dropdown /div /el-header !-- 内容区 -- el-main classmain router-view / /el-main /el-container /el-container /template script setup langts import { ref, computed } from vue import { useRoute, useRouter } from vue-router import { HomeFilled, Goods, Expand, Fold, FullScreen } from element-plus/icons-vue import { useUserStore } from /stores/user const route useRoute() const router useRouter() const userStore useUserStore() const isCollapse ref(false) /** 面包屑取 matched 里配置了 title 的层级 */ const crumbs computed(() route.matched.filter((r) r.meta?.title)) /** 全屏切换Fullscreen API */ function toggleFullscreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen() } else { document.exitFullscreen() } } /** 下拉菜单指令退出登录 */ function onCommand(cmd: string) { if (cmd logout) { userStore.logout() // 056 篇的 action清 token/用户信息 router.push(/login) ElMessage.success(已退出登录) } } /script style scoped .layout { height: 100vh; } .aside { background-color: #001529; transition: width 0.2s; } .logo { height: 50px; line-height: 50px; text-align: center; color: #fff; font-weight: bold; } .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--el-border-color); } .left { display: flex; align-items: center; gap: 16px; } .right { display: flex; align-items: center; gap: 20px; } .avatar { cursor: pointer; color: var(--el-color-primary); } .main { background-color: var(--el-bg-color-page); } /style【截图位置完整后台骨架——左侧深色菜单、顶部面包屑、右侧头像下拉】四、四个细节讲透el-menu加router属性菜单项的index直接当路由路径用不用再手写点击跳转:default-activeroute.pathElement 菜单的高亮靠它。绑定 route.path 后刷新页面/直接输 url 也能正确高亮——写死 ‘/home’ 的都在这里翻车面包屑数据源route.matched数组从父路由到当前路由一层层排好Layout → goods → list配合 meta.title050 篇直接渲染折叠动画aside 的 width 加 transitionel-menu 用:collapseisCollapse两处宽度要一致64px 是图标模式的标准宽度五、踩坑记录菜单高亮丢失default-active 写死或没绑 route.path——必须绑定当前路由路径el-menu-item 里直接写文字 collapse折叠后文字不消失溢出——标题要用#title插槽图标用 el-icon 包裹Layout 没放 router-view子页面白屏——嵌套路由父组件必须有router-view /048 篇requestFullscreen 报错必须在用户点击等手势回调里调用浏览器安全限制不能 onMounted 自动全屏退出登录只清了 Pinia忘了持久化数据057 篇刷新后 token 又复活——logout 里同时清 localStorage或插件字段再跳 /login面包屑出现重复层级redirect 中间层也有 meta.title——过滤掉不需要展示的层级六、今日小结布局三件套el-container el-aside el-header/el-main高度 100vh路由Layout 父路由 children 业务页切页只换 main 区域菜单router 属性 :default-active“route.path”高亮不丢面包屑 route.matched meta.title全屏 Fullscreen API退出 清状态 回登录页下篇预告菜单写死在模板里后端加个菜单就要发版下一篇 069 动态侧边栏菜单后端返回菜单树递归组件渲染配合 051 篇 addRoute 实现真·动态菜单。