*****************此文仅用于个人记录学习vite创建vue3项目过程,请勿转载或转发******************
一、左侧导航栏封装
在实现动态菜单之前,先排除权限问题的影响,先完成所有菜单项的正确展示,即静态菜单。
1、添加导航对应菜单
给该项目系统导航为一个两级树形结构,每一个导航(2级叶子节点跳转一个页面)跳转一个页面。系统主要功能模块分为三大类:应用管理(app)、系统管理(sys)、审计管理(logs)。其中应用管理模块包含用户管理(User)、机构管理(Dept)、角色管理(Role)、资源管理(Resource)4个子功能模块,系统管理包含用户管理(User)、公告管理(Notice)两个子功能模块,审计日志包含操作日志(Operation)、访问日志(visit)两个子功能模块。每个子功能模块看作一个页面。
整个侧边菜单栏设计如下
为每个子模块页面添加简单的测试文本:
2、构造静态导航树结构
最终我们需要考虑实现通过权限控制的动态菜单,因此导航菜单的数据最终由后端返回,因为本次是先实现静态菜单,因此可以模拟后台数据格式先写死一个菜单结构。直接在mock/data.js文件种添加这个树形数据
3、修改布局的左侧导航组件src/layout/components/PageSidebar.vue,使用Element的菜单组件el-menu,引入上一步构造的树形结构数据,完成基本布局
el-menu菜单组件设置默认路由:defaultActive,以保证每次刷新页面时对应路由所在的菜单项仍然是高亮状态
el-menu菜单组件设置router=true,启用vue-router模式,当激活导航时,以index为path进行路由跳转
本系统导航菜单配置的图标都是elementplus图标集内的图标,因此使用el-icon标签引入对应图标,由于图标的不固定,因此使用组件形式的图标时采用component动态组件,设置is属性对应图标组件名称
在纵向导航上方添加一个图标,用于实现展开/收缩功能
4、添加导航菜单相关翻译
查看显示效果
但是现在点击每个页面会显示404,需要将动态菜单完善了后才会正确显示页面内容。