微信小程序 - 页面跳转（wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch） |
| 时间：2025-09-02 16:01:34 来源： 作者： |
API 跳转
1、wx.navigateTo
（1）基本介绍
功能：保留当前页面，跳转到应用内的某个页面，使用该方法跳转后可以通过返回按钮返回到原页面
使用场景：适用于需要保留当前页面状态，后续还需返回的情况，例如，从商品列表页跳转到商品详情页
注：跳转的页面必须是在 app.json 的 pages 中配置的，否则会跳转失败
注：小程序中页面栈最多 10 层
（2）演示
wx.navigateTo({
url: '/pages/detail/detail?id=123',
success: function(res) {
console.log('跳转成功');
},
fail: function(err) {
console.log('跳转失败', err);
},
complete: function() {
console.log('跳转操作完成');
}
});
AI生成项目
js
1
2
3
4
5
6
7
8
9
10
11
12
2、wx.redirectTo
（1）基本介绍
功能：关闭当前页面，跳转到应用内的某个页面，使用该方法跳转后无法通过返回按钮返回到原页面
使用场景：适用于不需要保留当前页面状态，且不希望用户返回的情况，例如，用户登录成功后从登录页跳转到主页
注：跳转的页面必须是在 app.json 的 pages 中配置的，否则会跳转失败
（2）演示
wx.redirectTo({
url: '/pages/index/index',
success: function(res) {
console.log('跳转成功');
},
fail: function(err) {
console.log('跳转失败', err);
},
complete: function() {
console.log('跳转操作完成');
}
});
AI生成项目
js
1
2
3
4
5
6
7
8
9
10
11
12
3、wx.switchTab
（1）基本介绍
功能：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
使用场景：用于在不同的 tabBar 页面之间切换，例如，在小程序底部的导航栏切换不同的功能模块
注：跳转的页面必须是在 app.json 的 pages 与 tabBar 中配置的，否则会跳转失败
（2）演示
wx.switchTab({
url: '/pages/home/home',
success: function(res) {
console.log('跳转成功');
},
fail: function(err) {
console.log('跳转失败', err);
},
complete: function() {
console.log('跳转操作完成');
}
});
AI生成项目
js
1
2
3
4
5
6
7
8
9
10
11
12
4、wx.reLaunch
（1）基本介绍
功能：关闭所有页面，打开应用内的某个页面
使用场景：适用于需要清空所有页面栈，重新打开一个页面的情况，比如用户退出登录后跳转到登录页
注：跳转的页面必须是在 app.json 的 pages 中配置的，否则会跳转失败
（2）演示
wx.reLaunch({
url: '/pages/login/login',
success: function(res) {
console.log('跳转成功');
},
fail: function(err) {
console.log('跳转失败', err);
},
complete: function() {
console.log('跳转操作完成');
}
});
AI生成项目
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
navigator 组件跳转
1、基本介绍
在 WXML 文件中实现页面跳转，可通过设置不同属性实现类似上述方法的跳转效果
open-type 属性用于指定跳转方式，若不指定则默认为 navigate
open-type 属性 说明
navigate（默认） 等效 wx.navigateTo
redirect 等效 wx.navigateTo
switchTab 等效 wx.switchTab
reLaunch 等效 wx.reLaunch
注：跳转的页面必须是在 app.json 的 pages 或 tabBar 中配置的，否则会跳转失败
2、演示
navigate
<navigator url="/pages/detail/detail?id=123">
<view>点击跳转到详情页</view>
</navigator>
AI生成项目
html
1
2
3
redirectTo
<navigator url="/pages/index/index" open-type="redirect">
<view>点击关闭当前页并跳转</view>
</navigator>
AI生成项目
html
1
2
3
switchTab
<navigator url="/pages/home/home" open-type="switchTab">
<view>点击切换到 tabBar 页面</view>
</navigator>
AI生成项目
html
1
2
3
我命
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_52173250/article/details/145816105 |
|
|
|
