3.6 KiB

Raw Permalink Blame History

工单页面路由跳转问题诊断

问题描述

点击工单管理页面的"测试中"按钮时，页面跳转到错误的URL：

http://127.0.0.1/testWorkOrder/testOrder01?page=work_order&state=0

预期行为：应该停留在工单管理页面，只改变 testStep 参数。

问题分析

1. 路由配置问题

在 router/index.js 中发现了一个动态路由配置：

{
  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 中有一个路由监听器：

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 中，按钮配置看起来是正确的：

<el-button
  type="primary"
  plain
  @click="queryParams.testStep = 1; getList()"
  v-hasPermi="['system:test_work_order:list']"
>测试中</el-button>

根本原因

问题的根本原因是：路由配置错误

工单管理页面的路由配置了动态参数 :id，但实际上工单列表页面不需要这个参数。这导致：

当访问工单列表时，路由可能无法正确匹配
可能触发了其他路由的匹配逻辑
URL 中出现了错误的路径

解决方案

方案1：修复路由配置（推荐）

删除或修改 router/index.js 中的动态路由配置：

// 删除这个错误的路由配置
{
  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：清除浏览器缓存

按 Ctrl + Shift + Delete 打开清除浏览器数据
选择"缓存的图片和文件"
点击"清除数据"
或者直接按 Ctrl + Shift + R 强制刷新页面

实施步骤

删除错误的路由配置
重启前端服务
清除浏览器缓存
重新访问工单管理页面
测试"测试中"按钮

验证方法

访问工单管理页面，URL 应该是：http://127.0.0.1/system/test_work_order
点击"测试中"按钮
URL 应该保持不变，只有数据列表发生变化
浏览器控制台不应该有路由错误

3.6 KiB Raw Permalink Blame History Unescape Escape