uniapp标签跳转

uniapp 标签跳转方法

在 uniapp 中实现页面跳转可以通过多种方式完成，以下为常见的几种方法：

使用 <navigator> 标签

<navigator> 是 uniapp 提供的原生导航组件，类似于 HTML 中的 <a> 标签。通过设置 url 属性指定目标页面路径，open-type 属性定义跳转方式。

<navigator url="/pages/detail/detail" open-type="navigate">跳转到详情页</navigator>

open-type 可选值：

• navigate：保留当前页面，跳转到新页面（默认值）
• redirect：关闭当前页面，跳转到新页面
• switchTab：跳转到 tabBar 页面
• reLaunch：关闭所有页面，打开新页面

使用 API 跳转

uniapp 提供了一系列页面跳转的 API，可以在 JavaScript 中调用：

// 保留当前页面，跳转到新页面
uni.navigateTo({
  url: '/pages/detail/detail'
});

// 关闭当前页面，跳转到新页面
uni.redirectTo({
  url: '/pages/detail/detail'
});

// 跳转到 tabBar 页面
uni.switchTab({
  url: '/pages/index/index'
});

// 关闭所有页面，打开新页面
uni.reLaunch({
  url: '/pages/index/index'
});

传递参数

跳转时可以传递参数，在目标页面通过 onLoad 生命周期函数接收：

// 跳转时传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
});

// 目标页面接收参数
onLoad(options) {
  console.log(options.id);    // 输出 1
  console.log(options.name);  // 输出 test
}

注意事项

• 跳转路径需要写在 pages.json 中配置的页面路径
• tabBar 页面只能使用 switchTab 跳转
• 页面路径前需要加 /，表示从根目录开始
• 传递的参数会显示在 url 中，敏感数据不建议通过 url 传递

以上方法可以根据实际需求选择使用，<navigator> 适合简单的静态跳转，API 方式适合需要逻辑判断的动态跳转。