130 lines
3.6 KiB
Markdown
130 lines
3.6 KiB
Markdown
|
# 工单页面路由跳转问题诊断
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
点击工单管理页面的"测试中"按钮时，页面跳转到错误的URL：
|
|||
|
|
```
|
|||
|
|
http://127.0.0.1/testWorkOrder/testOrder01?page=work_order&state=0
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
预期行为：应该停留在工单管理页面，只改变 `testStep` 参数。
|
|||
|
|
|
|||
|
|
## 问题分析
|
|||
|
|
|
|||
|
|
### 1. 路由配置问题
|
|||
|
|
在 `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' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这个路由配置有问题：
|
|||
|
|
- 它定义了一个动态参数 `:id`
|
|||
|
|
- 但工单列表页面不需要这个参数
|
|||
|
|
- 这可能导致路由匹配错误
|
|||
|
|
|
|||
|
|
### 2. 订单页面的路由监听器
|
|||
|
|
在 `test_order/index.vue` 中有一个路由监听器：
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
'$route': {
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
handler(to) {
|
|||
|
|
const page = to.query.page || to.params.page;
|
|||
|
|
const pagestate = to.query.state || to.params.state;
|
|||
|
|
if(page !== null) {
|
|||
|
|
this.cur_page = page;
|
|||
|
|
}
|
|||
|
|
if(pagestate !== null) {
|
|||
|
|
this.cur_state = pagestate;
|
|||
|
|
this.queryParams.state = pagestate;
|
|||
|
|
}
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这个监听器会响应 `page` 和 `state` 参数，但这是订单页面的逻辑，不应该影响工单页面。
|
|||
|
|
|
|||
|
|
### 3. 工单页面的按钮配置
|
|||
|
|
在 `test_work_order/index.vue` 中，按钮配置看起来是正确的：
|
|||
|
|
```vue
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
@click="queryParams.testStep = 1; getList()"
|
|||
|
|
v-hasPermi="['system:test_work_order:list']"
|
|||
|
|
>测试中</el-button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 根本原因
|
|||
|
|
问题的根本原因是：**路由配置错误**
|
|||
|
|
|
|||
|
|
工单管理页面的路由配置了动态参数 `:id`，但实际上工单列表页面不需要这个参数。这导致：
|
|||
|
|
1. 当访问工单列表时，路由可能无法正确匹配
|
|||
|
|
2. 可能触发了其他路由的匹配逻辑
|
|||
|
|
3. URL 中出现了错误的路径
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 方案1：修复路由配置（推荐）
|
|||
|
|
删除或修改 `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' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
工单列表页面应该通过菜单配置来访问，不需要在 `router/index.js` 中定义额外的路由。
|
|||
|
|
|
|||
|
|
### 方案2：检查菜单配置
|
|||
|
|
确保工单管理菜单的路由路径配置正确：
|
|||
|
|
- 菜单路径应该是：`/system/test_work_order`
|
|||
|
|
- 组件路径应该是：`system/test_work_order/index`
|
|||
|
|
|
|||
|
|
### 方案3：清除浏览器缓存
|
|||
|
|
1. 按 `Ctrl + Shift + Delete` 打开清除浏览器数据
|
|||
|
|
2. 选择"缓存的图片和文件"
|
|||
|
|
3. 点击"清除数据"
|
|||
|
|
4. 或者直接按 `Ctrl + Shift + R` 强制刷新页面
|
|||
|
|
|
|||
|
|
## 实施步骤
|
|||
|
|
|
|||
|
|
1. **删除错误的路由配置**
|
|||
|
|
2. **重启前端服务**
|
|||
|
|
3. **清除浏览器缓存**
|
|||
|
|
4. **重新访问工单管理页面**
|
|||
|
|
5. **测试"测试中"按钮**
|
|||
|
|
|
|||
|
|
## 验证方法
|
|||
|
|
1. 访问工单管理页面，URL 应该是：`http://127.0.0.1/system/test_work_order`
|
|||
|
|
2. 点击"测试中"按钮
|
|||
|
|
3. URL 应该保持不变，只有数据列表发生变化
|
|||
|
|
4. 浏览器控制台不应该有路由错误
|