微信小程序 - 页面跳转(wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch)

API 跳转

1、wx.navigateTo
(1)基本介绍
  1. 功能:保留当前页面,跳转到应用内的某个页面,使用该方法跳转后可以通过返回按钮返回到原页面

  2. 使用场景:适用于需要保留当前页面状态,后续还需返回的情况,例如,从商品列表页跳转到商品详情页

  • 注:跳转的页面必须是在 app.json 的 pages 中配置的,否则会跳转失败

  • 注:小程序中页面栈最多 10 层

(2)演示
js 复制代码
wx.navigateTo({
  url: '/pages/detail/detail?id=123',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  },
  complete: function() {
    console.log('跳转操作完成');
  }
});
2、wx.redirectTo
(1)基本介绍
  1. 功能:关闭当前页面,跳转到应用内的某个页面,使用该方法跳转后无法通过返回按钮返回到原页面

  2. 使用场景:适用于不需要保留当前页面状态,且不希望用户返回的情况,例如,用户登录成功后从登录页跳转到主页

  • 注:跳转的页面必须是在 app.json 的 pages 中配置的,否则会跳转失败
(2)演示
js 复制代码
wx.redirectTo({
  url: '/pages/index/index',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  },
  complete: function() {
    console.log('跳转操作完成');
  }
});
3、wx.switchTab
(1)基本介绍
  1. 功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  2. 使用场景:用于在不同的 tabBar 页面之间切换,例如,在小程序底部的导航栏切换不同的功能模块

  • 注:跳转的页面必须是在 app.json 的 pages 与 tabBar 中配置的,否则会跳转失败
(2)演示
js 复制代码
wx.switchTab({
  url: '/pages/home/home',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  },
  complete: function() {
    console.log('跳转操作完成');
  }
});
4、wx.reLaunch
(1)基本介绍
  1. 功能:关闭所有页面,打开应用内的某个页面

  2. 使用场景:适用于需要清空所有页面栈,重新打开一个页面的情况,比如用户退出登录后跳转到登录页

  • 注:跳转的页面必须是在 app.json 的 pages 中配置的,否则会跳转失败
(2)演示
javascript 复制代码
wx.reLaunch({
  url: '/pages/login/login',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  },
  complete: function() {
    console.log('跳转操作完成');
  }
});

1、基本介绍
  1. 在 WXML 文件中实现页面跳转,可通过设置不同属性实现类似上述方法的跳转效果

  2. open-type 属性用于指定跳转方式,若不指定则默认为 navigate

open-type 属性 说明
navigate(默认) 等效 wx.navigateTo
redirect 等效 wx.navigateTo
switchTab 等效 wx.switchTab
reLaunch 等效 wx.reLaunch
  • 注:跳转的页面必须是在 app.json 的 pages 或 tabBar 中配置的,否则会跳转失败
2、演示
  1. navigate
html 复制代码
<navigator url="/pages/detail/detail?id=123">
  <view>点击跳转到详情页</view>
</navigator>
  1. redirectTo
html 复制代码
<navigator url="/pages/index/index" open-type="redirect">
  <view>点击关闭当前页并跳转</view>
</navigator>
  1. switchTab
html 复制代码
<navigator url="/pages/home/home" open-type="switchTab">
  <view>点击切换到 tabBar 页面</view>
</navigator>
相关推荐
庸俗今天不摸鱼26 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下33 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
曲江涛42 分钟前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_4404705043 分钟前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
Apifox43 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js