nianxx-h5/docs/ROUTE_MIGRATION_MAP.md

YGChatCS 路由迁移映射

文档状态

• 状态：阶段 0 盘点产物
• 日期：2026-05-25
• 来源：src/pages.json
• 目标：将 uni-app 页面和分包路由迁移为 Vue Router 路由

迁移原则

1. 保留业务语义，不照搬 uni-app 目录结构到 URL。
2. 旧路由参数通过 Vue Router params 或 query 明确承接。
3. 分包概念在 Web 端取消，改由路由懒加载和业务模块拆包承担。
4. navigationStyle: "custom" 对应 Web 端页面自定义顶部栏，不再依赖小程序导航配置。
5. 旧项目路由在迁移期作为兼容入口保留映射表，便于 WebView、外链和历史跳转逐步改造。

路由映射总表

优先级	uni-app 路由	Vue Router 路由	目标模块	迁移策略	备注
P0	/pages/index/index	/	features/chat	重写页面壳，复用可迁移业务逻辑	首页、发现、聊天主入口；旧页面禁用页面滚动
P0	/pages/login/index	/login	features/auth	重写	登录方式需按 Web/H5 重新确认
P1	/pages/goods/index	/goods/:commodityId?	features/goods	迁移并类型化	旧默认 commodityId 仅可作为开发兜底
P1	/pages/goods/album/index	/goods/album	features/goods	迁移	图片数据建议通过 store 或 query id 获取
P2	/pages/webview/index	/bridge/webview	features/bridge	重建桥接	<web-view> 改为 iframe 或外链跳转
P0	/pages/ChatMain/ChatLongAnswer/index	/chat/long-answer	features/chat	迁移并拆分	接收 message、streamId、finished 等 query
P0	/pages/ChatModule/LongTextGuideCardPreview/guide	/chat/guide/guide	features/chat	迁移	长文本 guide 预览
P0	/pages/ChatModule/LongTextGuideCardPreview/poi	/chat/guide/poi	features/chat	迁移	长文本 poi 预览
P0	/pages/ChatModule/LongTextGuideCardPreview/route	/chat/guide/route	features/chat	迁移	长文本 route 预览
P0	/pages/ChatModule/LongTextGuideCardPreview/photo	/chat/guide/photo	features/chat	迁移	长文本 photo 预览
P1	/pages/ChatMain/NoticeMessage/detail	/notice/:id?	features/notice	迁移	当前通过 query 传参，Web 端建议兼容 query
P3	/pages/test/index	/dev/test	features/dev	延后或废弃	仅开发测试入口，默认不进入首批迁移
P1	/pages-order/order/list	/orders	features/order	迁移	订单列表，原 pages-order 分包取消
P1	/pages-order/order/detail	/orders/:orderId	features/order	迁移	兼容 ?orderId= 历史跳转
P2	/pages-service/order/list	/service-orders	features/service	迁移	工单/服务订单列表
P2	/pages-quick/list	/quick	features/quick	迁移	快捷入口列表
P1	/pages-booking/index	/booking	features/booking	迁移	预订确认；参数来源需从 query/store 明确化
P2	/pages-bridge/UploadImage	/bridge/upload-image	features/bridge	兼容后废弃	优先改为统一上传服务和 postMessage 回传
P2	/pages-bridge/SaveImage	/bridge/save-image	features/bridge	兼容后废弃	浏览器保存图片能力受限制

Vue Router 初稿

export const routes = [
  { path: "/", name: "home", component: () => import("@/features/chat/pages/HomePage.vue") },
  { path: "/login", name: "login", component: () => import("@/features/auth/pages/LoginPage.vue") },
  { path: "/goods/:commodityId?", name: "goods-detail", component: () => import("@/features/goods/pages/GoodsDetailPage.vue") },
  { path: "/goods/album", name: "goods-album", component: () => import("@/features/goods/pages/GoodsAlbumPage.vue") },
  { path: "/booking", name: "booking", component: () => import("@/features/booking/pages/BookingPage.vue") },
  { path: "/orders", name: "orders", component: () => import("@/features/order/pages/OrderListPage.vue") },
  { path: "/orders/:orderId", name: "order-detail", component: () => import("@/features/order/pages/OrderDetailPage.vue") },
  { path: "/service-orders", name: "service-orders", component: () => import("@/features/service/pages/ServiceOrderListPage.vue") },
  { path: "/quick", name: "quick", component: () => import("@/features/quick/pages/QuickListPage.vue") },
  { path: "/notice/:id?", name: "notice-detail", component: () => import("@/features/notice/pages/NoticeDetailPage.vue") },
  { path: "/chat/long-answer", name: "chat-long-answer", component: () => import("@/features/chat/pages/LongAnswerPage.vue") },
  { path: "/chat/guide/:type", name: "chat-guide-preview", component: () => import("@/features/chat/pages/GuidePreviewPage.vue") },
  { path: "/bridge/webview", name: "bridge-webview", component: () => import("@/features/bridge/pages/WebviewBridgePage.vue") },
  { path: "/bridge/upload-image", name: "bridge-upload-image", component: () => import("@/features/bridge/pages/UploadImageBridgePage.vue") },
  { path: "/bridge/save-image", name: "bridge-save-image", component: () => import("@/features/bridge/pages/SaveImageBridgePage.vue") },
  { path: "/dev/test", name: "dev-test", component: () => import("@/features/dev/pages/TestPage.vue") },
]

旧路由兼容策略

迁移期间建议保留一个旧路由转换函数，用于处理旧代码、外部 H5、历史分享链接中的 uni-app path：

输入	输出
/pages/index/index	/
/pages/goods/index?commodityId=123	/goods/123
/pages-order/order/detail?orderId=123	/orders/123
/pages/webview/index?url=...	/bridge/webview?url=...
/pages/ChatModule/LongTextGuideCardPreview/poi	/chat/guide/poi

兼容层只在迁移期使用。新 Web 代码应直接使用 Vue Router route name 或封装后的 routerService。

参数迁移规则

参数来源	uni-app 写法	Web 目标写法
页面参数	onLoad((query) => {})	useRoute().query 或 useRoute().params
商品 id	commodityId query	/goods/:commodityId，同时兼容 query
订单 id	orderId query	/orders/:orderId，同时兼容 query
WebView URL	url query	/bridge/webview?url=，进入前校验和编码
长回答内容	message/streamId/finished query	query 保留，后续可改为 store/session id

迁移顺序

1. 建立 Vue Router 和 routerService。
2. 添加旧路由到新路由的转换表。
3. 迁移首页、登录、聊天详情等 P0 路由。
4. 迁移商品、预订、订单等 P1 路由。
5. 迁移工单、快捷入口、桥接等 P2 路由。
6. 确认没有旧路由调用后，删除兼容转换表。

验收清单

• Vue Router 中存在所有 P0/P1 路由。
• 旧 navigateTo 参数能正确映射到新路由。
• 页面刷新后能从 URL 恢复必要参数。
• 登录拦截、424 登出跳转和返回上一页逻辑可用。
• WebView/iframe URL 参数经过编码和安全校验。
• 分包页面迁移后不再依赖 uni-app subPackages。