SOLUTIONS_ROUTE_FIX.md 3.0 KB

解决方案路由修复说明

问题原因

之前 /solutions 路由配置了 redirect: '/solutions/surveying',导致访问 /solutions 时总是重定向到第一个子路由,列表页面无法显示。

修复方案

1. 修改路由配置

将解决方案路由从父子结构改为扁平结构:

// 之前(错误)
{
  path: '/solutions',
  component: resolve => require(['@/view/Solutions/index'], resolve),
  redirect: '/solutions/surveying',
  children: [
    { path: 'surveying', component: ... },
    { path: 'building', component: ... },
    { path: 'safety', component: ... },
    { path: 'rag', component: ... }
  ]
}

// 现在(正确)
{
  path: '/solutions',
  component: resolve => require(['@/view/Solutions/index'], resolve),
  meta: { title: '解决方案' }
},
{
  path: '/solutions/surveying',
  component: resolve => require(['@/view/Solutions/Surveying'], resolve),
  meta: { title: '基础测绘解决方案' }
},
{
  path: '/solutions/building',
  component: resolve => require(['@/view/Solutions/Building'], resolve),
  meta: { title: '建筑工程解决方案' }
},
{
  path: '/solutions/safety',
  component: resolve => require(['@/view/Solutions/Safety'], resolve),
  meta: { title: '安全生产解决方案' }
},
{
  path: '/solutions/rag',
  component: resolve => require(['@/view/Solutions/Rag'], resolve),
  meta: { title: '应急救援解决方案' }
}

2. 更新 Header 导航

移除解决方案的子菜单配置:

{
  name: "解决方案",
  path: "/solutions",
  children: []  // 空数组,无子菜单
}

访问路径

页面 路径 说明
解决方案列表 /#/solutions 显示 4 个解决方案卡片
基础测绘 /#/solutions/surveying 左侧导航 + 右侧内容
建筑工程 /#/solutions/building 左侧导航 + 右侧内容
安全生产 /#/solutions/safety 左侧导航 + 右侧内容
应急救援 /#/solutions/rag 左侧导航 + 右侧内容

Header 导航结构

首页
产品 ▼
  ├ 行业应用无人机
  ├ 无人机负载
  ├ 软件与服务
  └ 软件定制开发
解决方案(无子菜单)
公司动态
公司介绍
加入我们
联系我们

文件修改

文件 修改内容
src/config/nav-config.js 修改路由结构为扁平化,移除 solutions 的 redirect 和 children
src/components/Header.vue 自动同步 navConfig,解决方案无子菜单

测试步骤

  1. 访问 http://localhost:8888/#/solutions

    • ✅ 应显示解决方案列表页面
    • ✅ 显示 4 个解决方案卡片
  2. 点击"基础测绘"卡片

    • ✅ 应跳转到 /solutions/surveying
    • ✅ 显示左侧导航和右侧内容
  3. 点击"应急救援"卡片

    • ✅ 应跳转到 /solutions/rag
    • ✅ 显示左侧导航和右侧内容(4 个章节)
  4. 点击 Header 导航的"解决方案"

    • ✅ 应跳转到 /solutions(列表页)