uniapp跳转详情页

uniapp跳转详情页的实现方法

使用navigator组件跳转

在模板中使用<navigator>组件实现页面跳转，适用于静态路由跳转。通过url属性指定目标页面路径，open-type属性定义跳转方式。

<navigator url="/pages/detail/detail?id=123" open-type="navigate">
  跳转至详情页
</navigator>

编程式导航跳转

在脚本中通过uni.navigateTo方法实现动态跳转，适合需要条件判断的场景。参数通过url拼接或events传递。

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test',
  success: function(res) {
    console.log('跳转成功');
  }
});

传递参数的接收方式

在详情页的onLoad生命周期中接收参数，可通过options对象获取URL中的查询参数。

onLoad(options) {
  console.log('接收到的ID:', options.id);
  console.log('接收到的Name:', options.name);
}

跳转方式对比

• uni.navigateTo: 保留当前页，跳转新页（有返回按钮）
• uni.redirectTo: 关闭当前页，跳转新页（无返回按钮）
• uni.reLaunch: 关闭所有页，打开新页（重置路由栈）
• uni.switchTab: 专用于切换Tabbar页面

注意事项

URL长度限制需控制在合理范围内，复杂对象建议先序列化。H5端参数会暴露在地址栏，敏感数据应使用全局变量或Vuex管理。

跨平台兼容性需注意：App端支持webview嵌套，小程序端需遵守各自平台的跳转规则。