vue3+elementplus+ts搭建权限管理系统--11

*****************此文仅用于个人记录学习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，需要将动态菜单完善了后才会正确显示页面内容。