uniapp详情页如何传递和获取ID参数？

Question

在使用 UniApp 开发跨平台应用时，常需从列表页跳转至详情页并传递唯一标识 ID。常见问题是：通过 `uni.navigateTo` 路由跳转时，使用 query 方式传参，如 `url: 'detail?id=123'`，但在目标页面 `onLoad` 生命周期中无法正确获取 id 参数。可能原因包括 URL 未编码、参数拼接错误或页面路由配置不当。此外，若 ID 为动态参数（如 `/detail/123`），需在 pages.json 中正确配置动态路由并使用 `$route.params` 获取（仅 H5 平台支持良好），导致非 H5 端获取失败。如何统一、可靠地在各端传递和获取详情页 ID？

Answer 1

一、问题背景与常见现象

在使用 UniApp 开发跨平台应用时，从列表页跳转至详情页并传递唯一标识 ID 是高频操作。开发者常采用 uni.navigateTo 方法结合 URL 查询参数（query）进行传参，例如：

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

然而，在目标页面的 onLoad 生命周期中，部分开发者反馈无法正确获取 id 参数，尤其是在非 H5 平台（如微信小程序、App 等）。这种不一致性严重影响了用户体验和开发效率。

根本原因涉及多个层面：URL 编码缺失、参数拼接错误、路由配置疏漏，以及对动态路由机制理解不足等。

二、由浅入深的问题分析路径

1. 第一层：基础语法检查 —— 是否存在拼写错误或路径不匹配？
2. 第二层：URL 编码问题 —— 特殊字符未编码导致解析失败。
3. 第三层：平台差异性处理 —— 小程序端对 query 参数长度有限制，且不支持 $route.params。
4. 第四层：动态路由配置缺失 —— pages.json 未声明动态段，导致路径无法映射。
5. 第五层：生命周期时机问题 —— 在 onLoad 外尝试读取参数，造成数据为空。
6. 第六层：跨页面通信设计缺陷 —— 过度依赖 URL 传参，缺乏状态管理思维。

三、多维度解决方案对比表

方案	适用平台	可靠性	维护成本	推荐指数
Query 参数传参	H5、小程序、App	中（需编码）	低	★★★☆☆
动态路由 (/detail/:id)	仅 H5 支持良好	低（非 H5 不稳定）	高	★☆☆☆☆
全局状态管理（Pinia/Vuex）	全平台一致	高	中	★★★★★
uni.$emit / uni.$on 事件通信	全平台	中（异步风险）	中	★★★☆☆
本地缓存（uni.setStorageSync）	全平台	高（需清理）	低	★★★★☆

四、统一可靠的 ID 传递实践策略

为实现跨平台一致性，建议采用“缓存 + Query 回退”混合模式：

// 列表页：存储数据并跳转
const id = '123';
uni.setStorageSync('CURRENT_DETAIL_ID', id);
uni.navigateTo({
  url: `/pages/detail/detail?id=${encodeURIComponent(id)}`
});

// 详情页 onLoad 中优先读缓存，其次取 query
onLoad(query) {
  const idFromCache = uni.getStorageSync('CURRENT_DETAIL_ID');
  const idFromQuery = decodeURIComponent(query.id || '');
  
  const finalId = idFromCache || idFromQuery;
  if (!finalId) {
    uni.showToast({ icon: 'error', title: '参数丢失' });
    return;
  }
  this.loadData(finalId); // 加载详情
}

该策略兼顾了 H5 的 SEO 友好性与原生端的稳定性。

五、动态路由配置与限制说明

若坚持使用动态路径风格（如 /detail/123），需在 pages.json 显式配置：

{
  "pages": [
    {
      "path": "pages/detail/detail",
      "style": { ... }
    }
  ],
  "dynamicRoutes": [
    {
      "key": "detail/:id",
      "page": "pages/detail/detail"
    }
  ]
}

但必须注意：目前仅 H5 平台能通过 this.$route.params.id 正确获取；小程序和 App 端仍需依赖 query 或其他方式。因此，动态路由不宜作为跨平台主方案。

六、流程图：ID 传递决策逻辑

graph TD
    A[开始跳转详情页] --> B{是否需要 SEO?}
    B -- 是 --> C[使用 query + encodeURIComponent]
    B -- 否 --> D[使用缓存存储 ID]
    C --> E[调用 uni.navigateTo]
    D --> E
    E --> F[详情页 onLoad]
    F --> G{是否有 $route.params.id?}
    G -- 是(H5) --> H[使用 params.id]
    G -- 否 --> I[读取 query.id 或 缓存]
    I --> J[验证 ID 有效性]
    J --> K[加载远程数据]
    K --> L[展示详情内容]