110 lines
3.3 KiB
Markdown
110 lines
3.3 KiB
Markdown
# 菜单显示问题修复说明
|
||
|
||
## 问题原因
|
||
|
||
在实现动态路由权限时，我们将路由名称从连字符改为下划线格式：
|
||
- `user-manage` → `user_manage`
|
||
- `my-device` → `my_device`
|
||
- `my-application` → `my_application`
|
||
|
||
但是，**组件路径(component)必须与实际文件夹结构保持一致**，而实际文件夹使用的是连字符：
|
||
- `src/views/user-manage/`
|
||
- `src/views/my-device/`
|
||
- `src/views/my-application/`
|
||
|
||
这导致前端无法找到对应的组件文件，出现错误和菜单显示异常。
|
||
|
||
## 解决方案
|
||
|
||
保持以下规则：
|
||
1. **路由名称(name)** 使用下划线：`user_manage`, `my_device`, `my_application`
|
||
2. **组件路径(component)** 使用连字符匹配实际文件夹：`view.user-manage`, `view.my-device`
|
||
|
||
## 修复步骤
|
||
|
||
### 方法一：使用批处理脚本（推荐）
|
||
|
||
1. 双击运行 `fix_database.bat`
|
||
2. 按任意键开始执行
|
||
3. 等待修复完成
|
||
4. 重启后端服务
|
||
5. 刷新浏览器测试
|
||
|
||
### 方法二：手动执行 SQL
|
||
|
||
1. 打开 MySQL 客户端或命令行
|
||
2. 连接到数据库：
|
||
```bash
|
||
mysql -h localhost -P 3306 -u root -proot soybean_admin
|
||
```
|
||
3. 执行 SQL 文件：
|
||
```sql
|
||
source EXECUTE_THIS_FIX.sql;
|
||
```
|
||
或者直接复制 `EXECUTE_THIS_FIX.sql` 中的 SQL 语句执行
|
||
|
||
4. 重启后端服务
|
||
5. 刷新浏览器测试
|
||
|
||
## 验证修复
|
||
|
||
执行 SQL 后，应该看到类似以下的结果：
|
||
|
||
| 路由名称(下划线) | 路径 | 组件路径(连字符) |
|
||
|---|---|---|
|
||
| user_manage | /user-manage | layout.base$view.user-manage |
|
||
| user_manage_list | /user-manage/list | layout.base$view.user-manage_list |
|
||
| my_device | /my-device | layout.base$view.my-device |
|
||
| my_device_status | /my-device/status | layout.base$view.my-device_status |
|
||
|
||
## 重启服务
|
||
|
||
修复数据库后，必须重启后端服务：
|
||
|
||
```bash
|
||
cd backend
|
||
start.bat
|
||
```
|
||
|
||
## 测试
|
||
|
||
1. 清除浏览器缓存（Ctrl+Shift+Delete）
|
||
2. 强制刷新页面（Ctrl+Shift+R）
|
||
3. 重新登录
|
||
4. 检查菜单是否正常显示
|
||
5. 检查是否还有重复菜单
|
||
6. 检查父子菜单层级是否正确
|
||
|
||
## 如果还有问题
|
||
|
||
如果修复后仍有问题，请检查：
|
||
|
||
1. 后端日志中是否有错误信息
|
||
2. 浏览器控制台是否有错误
|
||
3. 数据库中的 component 字段是否已正确更新
|
||
4. 是否已重启后端服务
|
||
5. 是否已清除浏览器缓存
|
||
|
||
## 技术细节
|
||
|
||
### 路由名称规则（用于权限判断）
|
||
- 使用下划线分隔
|
||
- 父菜单：0-1个下划线（如 `user_manage`, `device`）
|
||
- 子菜单：2个或以上下划线（如 `user_manage_list`, `device_online`）
|
||
|
||
### 组件路径规则（用于加载 Vue 组件）
|
||
- 必须与实际文件夹结构完全一致
|
||
- 文件夹使用连字符：`user-manage`, `my-device`
|
||
- 子文件夹也使用连字符：`power-control`, `my-list`
|
||
- 格式：`layout.base$view.{folder}_{subfolder}`
|
||
|
||
### 示例对照表
|
||
|
||
| 路由名称 | 文件夹路径 | 组件路径 |
|
||
|---|---|---|
|
||
| user_manage | src/views/user-manage/ | layout.base$view.user-manage |
|
||
| user_manage_list | src/views/user-manage/list/ | layout.base$view.user-manage_list |
|
||
| my_device | src/views/my-device/ | layout.base$view.my-device |
|
||
| my_device_status | src/views/my-device/status/ | layout.base$view.my-device_status |
|
||
| my_device_power | src/views/my-device/power-control/ | layout.base$view.my-device_power-control |
|