108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
|
# 工单页面路由跳转问题修复说明
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
点击工单管理页面的"测试中"按钮时，页面跳转到错误的URL：
|
|||
|
|
```
|
|||
|
|
http://127.0.0.1/testWorkOrder/testOrder01?page=work_order&state=0
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 根本原因
|
|||
|
|
在 `ruoyi-fastapi-frontend/src/router/index.js` 中存在一个错误的动态路由配置：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
path: '/system/test_work_order',
|
|||
|
|
component: Layout,
|
|||
|
|
hidden: true,
|
|||
|
|
permissions: ['system:test_work_order:list'],
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
path: 'index/:id', // ❌ 这个动态参数导致路由匹配错误
|
|||
|
|
component: () => import('@/views/system/test_work_order/index'),
|
|||
|
|
name: 'TestWorkOrder',
|
|||
|
|
meta: { title: '测试工单', activeMenu: '/system/test_work_order' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这个路由配置的问题：
|
|||
|
|
1. 定义了一个动态参数 `:id`，但工单列表页面不需要这个参数
|
|||
|
|
2. 导致路由匹配时出现混乱
|
|||
|
|
3. 可能触发了错误的路由跳转逻辑
|
|||
|
|
|
|||
|
|
## 修复方案
|
|||
|
|
**删除了这个错误的路由配置**
|
|||
|
|
|
|||
|
|
工单列表页面应该通过后台菜单配置来访问，不需要在 `router/index.js` 中定义额外的动态路由。
|
|||
|
|
|
|||
|
|
## 修改内容
|
|||
|
|
|
|||
|
|
### 文件：`ruoyi-fastapi-frontend/src/router/index.js`
|
|||
|
|
|
|||
|
|
**删除了以下代码：**
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
path: '/system/test_work_order',
|
|||
|
|
component: Layout,
|
|||
|
|
hidden: true,
|
|||
|
|
permissions: ['system:test_work_order:list'],
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
path: 'index/:id',
|
|||
|
|
component: () => import('@/views/system/test_work_order/index'),
|
|||
|
|
name: 'TestWorkOrder',
|
|||
|
|
meta: { title: '测试工单', activeMenu: '/system/test_work_order' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 后续步骤
|
|||
|
|
|
|||
|
|
### 1. 重启前端服务
|
|||
|
|
```bash
|
|||
|
|
# 停止当前运行的前端服务（Ctrl + C）
|
|||
|
|
# 然后重新启动
|
|||
|
|
cd ruoyi-fastapi-frontend
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 清除浏览器缓存
|
|||
|
|
- 方法1：按 `Ctrl + Shift + R` 强制刷新页面
|
|||
|
|
- 方法2：按 `Ctrl + Shift + Delete` 打开清除浏览器数据，选择"缓存的图片和文件"，点击"清除数据"
|
|||
|
|
- 方法3：在浏览器开发者工具（F12）中，右键点击刷新按钮，选择"清空缓存并硬性重新加载"
|
|||
|
|
|
|||
|
|
### 3. 重新测试
|
|||
|
|
1. 访问工单管理页面
|
|||
|
|
2. 点击"测试中"按钮
|
|||
|
|
3. 验证页面是否正常显示数据，URL 是否保持不变
|
|||
|
|
|
|||
|
|
## 预期结果
|
|||
|
|
- ✅ 点击"测试中"按钮后，页面停留在工单管理页面
|
|||
|
|
- ✅ URL 保持为：`http://127.0.0.1/system/test_work_order`
|
|||
|
|
- ✅ 数据列表正确显示 `testStep = 1` 的工单
|
|||
|
|
- ✅ 不会跳转到其他页面
|
|||
|
|
|
|||
|
|
## 验证清单
|
|||
|
|
- [ ] 前端服务已重启
|
|||
|
|
- [ ] 浏览器缓存已清除
|
|||
|
|
- [ ] 访问工单管理页面正常
|
|||
|
|
- [ ] 点击"全部工单"按钮正常
|
|||
|
|
- [ ] 点击"待领取"按钮正常
|
|||
|
|
- [ ] 点击"测试中"按钮正常
|
|||
|
|
- [ ] 点击"一审中"按钮正常
|
|||
|
|
- [ ] 点击"二审中"按钮正常
|
|||
|
|
- [ ] 点击"三审中"按钮正常
|
|||
|
|
- [ ] 点击"已完成"按钮正常
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
1. **必须重启前端服务**：路由配置的修改需要重新编译前端代码
|
|||
|
|
2. **必须清除浏览器缓存**：旧的路由配置可能被浏览器缓存
|
|||
|
|
3. **检查菜单配置**：确保后台菜单管理中，工单管理菜单的路由路径配置正确为 `/system/test_work_order`
|
|||
|
|
|
|||
|
|
## 相关文件
|
|||
|
|
- `ruoyi-fastapi-frontend/src/router/index.js` - 路由配置文件（已修改）
|
|||
|
|
- `ruoyi-fastapi-frontend/src/views/system/test_work_order/index.vue` - 工单管理页面
|
|||
|
|
- `工单页面路由跳转问题诊断.md` - 详细诊断文档
|