当前位置：首页 > ai >正文

仓库管理系统-14-前端之侧边栏区域Aside的集中式状态管理菜单和动态路由

ai 2025/8/6 18:06:35

文章目录

1 获取对应权限菜单信息
- 1.1 数据库表(menu)
- 1.2 后端代码
- - 1.2.1 Menu.java
  - 1.2.2 MenuMapper.java
  - 1.2.3 MenuService.java
  - 1.2.4 MenuServiceImpl.java
  - 1.2.5 MenuController.java
- 1.3 数据返回前端
- - 1.3.1 UserController.java
  - 1.3.2 Login.vue
2 集中式状态管理vuex
- 2.1 编写store文件(store/index.js)
- 2.2 注册store(main.js)
- 2.3 数据存到store(Login.vue)
- 2.4 数据从store取出(Aside.vue)
3 自动生成路由
- 3.1 store/index.js(动态路由)
- 3.2 router/index.js(静态路由)
- 3.3 Aside.vue(菜单渲染)
- 3.4 App.vue(监听菜单变化)

添加菜单表，使用集中式状态管理vuex，自动生成动态路由。

在这里插入图片描述

1 获取对应权限菜单信息

先前通过手动在/router/index.js中配置路由，然后通过模拟菜单数据，使用v-for渲染菜单。

在vue-router对象中首先初始化公共路由，比如（404，login）等，然后在用户登陆成功，根据用户的角色信息，获取对应权限菜单信息menuList，并将后台返回的menuList转换成我们需要的router数据结构，然后通过vue-router新添的router.addRouter(routes)方法，同时我们可以将转后的路由信息保存于vuex，这样我们可以在我们的Aside组件中获取我们的全部路由信息，并且渲染我们的左侧菜单栏，让动态路由实现。