lvfengfree
44cb688072
- 问题：数据库中路由使用下划线(my_device)，前端期望连字符(my-device) - 导致路由无法匹配，页面全屏显示 - 添加诊断和修复脚本： * check_route_naming.sql - 检查路由命名问题 * fix_my_routes_naming.sql - 修复路由命名 * fix_my_routes_naming.bat - 批处理执行脚本 - 修复后需要重启后端服务和清除浏览器缓存
150 lines
3.7 KiB
Markdown
150 lines
3.7 KiB
Markdown
# 诊断"设备状态"全屏显示问题
|
||
|
||
## 问题描述
|
||
点击"我的设备 > 设备状态"选项卡后，页面全屏显示，侧边栏和顶栏消失。
|
||
|
||
## 可能的原因
|
||
|
||
### 1. 后端未重启
|
||
之前修改了 `RouteService.java` 和 `RouteController.java`，添加了 `getAllRoutes()` 方法。
|
||
如果后端没有重启，这些修改不会生效。
|
||
|
||
**解决方法：**
|
||
```bash
|
||
# 停止后端（Ctrl+C）
|
||
cd backend
|
||
mvn spring-boot:run
|
||
```
|
||
|
||
### 2. 浏览器缓存未清除
|
||
前端代码已经修改（将父级 index.vue 改为 `<router-view />`），但浏览器可能还在使用旧的缓存。
|
||
|
||
**解决方法：**
|
||
1. 按 `Ctrl + Shift + Delete`
|
||
2. 选择"全部时间"
|
||
3. 勾选"缓存的图片和文件"
|
||
4. 点击"清除数据"
|
||
5. 关闭所有浏览器窗口
|
||
6. 重新打开浏览器
|
||
|
||
### 3. 前端开发服务器未重启
|
||
如果前端开发服务器还在运行旧代码，需要重启。
|
||
|
||
**解决方法：**
|
||
```bash
|
||
# 停止前端服务（Ctrl+C）
|
||
npm run dev
|
||
# 或
|
||
pnpm dev
|
||
```
|
||
|
||
### 4. 路由配置问题
|
||
检查数据库中 `my-device` 相关路由的配置是否正确。
|
||
|
||
**检查方法：**
|
||
```sql
|
||
USE soybean_admin;
|
||
|
||
-- 查看"我的设备"路由配置
|
||
SELECT route_id, name, path, component, meta
|
||
FROM sys_route
|
||
WHERE name LIKE 'my-device%'
|
||
ORDER BY order_num;
|
||
```
|
||
|
||
**预期结果：**
|
||
- `my-device` 的 component 应该是 `layout.base`
|
||
- `my-device_status` 的 component 应该是 `view.my-device_status`
|
||
- `my-device_power-control` 的 component 应该是 `view.my-device_power-control`
|
||
- `my-device_remote-control` 的 component 应该是 `view.my-device_remote-control`
|
||
|
||
## 快速修复步骤
|
||
|
||
### 步骤1：重启后端
|
||
```bash
|
||
cd backend
|
||
# 停止当前运行的后端（Ctrl+C）
|
||
mvn spring-boot:run
|
||
```
|
||
|
||
### 步骤2：清除浏览器缓存
|
||
- 按 `Ctrl + Shift + Delete`
|
||
- 选择"全部时间"
|
||
- 清除缓存
|
||
|
||
### 步骤3：硬刷新页面
|
||
- 按 `Ctrl + F5` 或 `Ctrl + Shift + R`
|
||
|
||
### 步骤4：测试
|
||
1. 登录系统
|
||
2. 点击"我的设备"菜单
|
||
3. 点击"设备状态"选项卡
|
||
4. 检查是否还有侧边栏和顶栏
|
||
|
||
## 如果还是有问题
|
||
|
||
### 检查浏览器控制台
|
||
1. 按 `F12` 打开开发者工具
|
||
2. 切换到 Console 标签
|
||
3. 查看是否有错误信息
|
||
4. 切换到 Network 标签
|
||
5. 刷新页面
|
||
6. 查看 `/route/getUserRoutes` 请求的响应
|
||
|
||
### 检查路由响应
|
||
在 Network 标签中找到 `/route/getUserRoutes` 请求，查看响应：
|
||
|
||
**正确的响应应该包含：**
|
||
```json
|
||
{
|
||
"code": "0000",
|
||
"msg": "success",
|
||
"data": {
|
||
"routes": [
|
||
{
|
||
"name": "my-device",
|
||
"path": "/my-device",
|
||
"component": "layout.base",
|
||
"children": [
|
||
{
|
||
"name": "my-device_status",
|
||
"path": "/my-device/status",
|
||
"component": "view.my-device_status"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"home": "home"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 检查前端路由
|
||
在浏览器控制台中运行：
|
||
```javascript
|
||
// 查看当前路由
|
||
console.log(router.currentRoute.value)
|
||
|
||
// 查看所有路由
|
||
console.log(router.getRoutes())
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### Q: 为什么会全屏显示？
|
||
A: 当路由的 component 配置不正确时，Vue Router 无法找到正确的布局组件，导致只渲染页面内容，不渲染布局（侧边栏和顶栏）。
|
||
|
||
### Q: 为什么清除缓存很重要？
|
||
A: 浏览器会缓存 JavaScript 文件，如果不清除缓存，浏览器会继续使用旧的代码，即使服务器上的代码已经更新。
|
||
|
||
### Q: 为什么要重启后端？
|
||
A: Java 是编译型语言，修改代码后需要重新编译和启动才能生效。Spring Boot 的热重载只对某些类型的修改有效。
|
||
|
||
## 总结
|
||
|
||
最可能的原因是：
|
||
1. ✅ 后端未重启
|
||
2. ✅ 浏览器缓存未清除
|
||
|
||
请按照"快速修复步骤"操作，应该就能解决问题。
|