前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(三)
最新回答
如啼眼
2026-10-29 17:48:22
对于页面布局，常见的左右结构布局在后台管理系统中较为常见。我们本次项目中采用的正是这种布局方式，但如果有其他布局需求，你也可以自行加入，这里提供一种参考思路。
接下来，我们具体讲解项目布局的实现细节。
Asider组件主要包括Logo和Menu两部分。Logo部分通过Store控制表现形式，Menu组件则使用el-scrollbar包裹，以实现页面滚动效果。内部通过menuItem组件展示，注意组件的拆分，便于后续维护。
在Menu组件中，我们主要将一些非常用功能配置在全局Store中。默认激活项通过useRouter获取当前路由的path，点击事件使用select事件，回调传递menuItem的index。对于外链链接，我们使用window.open跳转，非外链链接则通过router.push实现。
使用el-icon的setting图标时，若设置大小为18，可能会在浏览器中出现卡段现象。为避免此问题，我们将其大小调整为19，确保图标显示正常。
NavTab组件则较为简单，可以使用el-scrollbar配置滑动效果，或者借助element的el-tabs实现。首先获取本地缓存的tab属性值，若无，则从router中获取并传递给filterAffixTags方法进行过滤，最后获取meta属性中的affix属性。
对于NavTab的右键菜单功能，我们可以在Main部分进行实现，确保在Vue中配置较为简单。若路由为嵌套状态，需在子路由下配置缓存状态，或在beforeEach路由钩子中将路由缓存至store中，以实现有效管理。
至此，本项目页面布局的介绍已告一段落。接下来，我们将深入探讨项目中的hooks封装。请关注下篇内容。
热门标签
