欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > 微信小程序之页面跳转(路由),navigateTo redirectTo reLaunch

微信小程序之页面跳转(路由),navigateTo redirectTo reLaunch

2025/6/13 21:45:01 来源:https://blog.csdn.net/cau_eric/article/details/148563836  浏览:    关键词:微信小程序之页面跳转(路由),navigateTo redirectTo reLaunch

作用都是跳转页面,使用的时候略有不同:

介绍:

navigateTo

  • 功能:保留当前页面,跳转到应用内的某个页面,形成页面栈的形式,可使用wx.navigateBack返回原页面。
  • 使用场景:适用于需要保留当前页面状态,后续还需返回的情况。如从商品列表页跳转到商品详情页,用户查看完详情后可返回列表页,列表页的浏览位置、筛选条件等状态都能保留。
  • 注意事项:使用navigateTo进行页面跳转时,每个页面都会被加入页面栈,而小程序页面栈的大小有限,要注意页面数量过多可能导致页面栈溢出。

redirectTo

  • 功能:关闭当前页面,跳转到应用内的某个页面。跳转后无法通过返回按钮返回到原页面,新页面会替换当前页面在页面栈中的位置。
  • 使用场景:适用于不需要保留当前页面状态,且不希望用户返回的情况。比如用户登录成功后从登录页跳转到主页,登录页的状态无需保留,也不希望用户通过返回按钮回到登录页。
  • 注意事项:跳转的目标页面必须是当前页面的同级或者子级页面,否则跳转将会失败。

 reLaunch

  • 功能:关闭所有页面,打开到应用内的某个页面。无论之前有多少页面在栈中,都会被全部清空,然后打开指定的页面。
  • 使用场景:适用于需要清空所有页面栈,重新打开一个页面的情况。比如用户退出登录后,需要清除所有已打开的页面,跳转到登录页;或者应用出现异常,需要重置到某个初始页面。
  • 注意事项:由于reLaunch会关闭所有页面,使用时要确保这是用户期望的行为,避免不必要的页面切换影响用户体验。

 代码实操:

我们在index页面上做个按钮,点击后跳转到page1页面,就像这样:

wxml代码:

<view class="indexContainer"><image class="avatarUrl" src="https://ww2.sinaimg.cn/mw690/61d7678dgy1hvt194v9kqj20p00uuape.jpg"/><text class="userName">{{msg}}</text><view class="content" bind:tap="goNext"><text>进入下一页面</text></view>
</view>

 goNext代码,我们顺便也在onHide和onUnload生命周期函数里面打上日志,方便查看:
 

/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('in index onHide');},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('in index onUnload');},goNext(){wx.navigateTo({url: '/pages/page1/page1',})}

用到的样式(css)代码:


.indexContainer {display: flex;flex-direction: column;align-items: center;
}.avatarUrl {width: 200rpx;height: 200rpx;margin: 100rpx 0;border-radius: 50%;
}.userName{font-size: 32rpx;margin: 100rpx 0;
}.content{width: 300rpx;height: 80rpx;line-height: 80rpx;font-size: 28rpx;text-align: center;border: 1rpx solid #333;border-radius: 10rpx;
}

这个时候我们点击按钮,跳转到下一页:

 navigateTo 保留当前页面,并没有销毁,只是隐藏了

接下来,我们把goNext里面调用的navigateTo 更换成redirectTo,看看效果,

 redirectTo 关闭当前页面,看到了吧,index页面被销毁了。

接下来,我们把goNext里面调用的redirectTo更换成reLaunch,看看效果,

reLaunch  关闭所有页面,index页面同样被销毁了。

这时候,我们看不出来 redirectTo 和 reLaunch 有什么区别,这个时候,我们再增加一个页面page2,在page1中跳转,index中的跳转改为navigateTo

代码如下:

index.js

/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('in index onHide');},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('in index onUnload');},goNext(){wx.navigateTo({url: '/pages/page1/page1',})}

page1.js

/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('in page1 onHide');},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('in page1 onUnload')},goNext(){wx.redirectTo({url: '/pages/page2/pages',})}

page1.wxml

<view class="indexContainer"><button class="content" bind:tap="goNext">跳转到下一页</button>
</view>

page1.wxss

/* pages/page1/page1.wxss */
.indexContainer {display: flex;flex-direction: column;align-items: center;
}
.content{width: 300rpx;height: 80rpx;line-height: 80rpx;font-size: 28rpx;text-align: center;border: 1rpx solid #333;border-radius: 10rpx;
}

好,这个时候,我们连续跳转两次,到达page2,看日志的显示:

我们在page1中使用了redirectTo,所以page1被销毁了,index还在。

我们把redirectTo改为reLaunch,看效果:

 

看到了吧,这次index页面也被销毁了,这就是区别。

客官,看明白了么! 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词