vue路由变了页面不跳转_微信小程序页面之间路由跳转

本文详细介绍了微信小程序中的四种页面跳转方法:wx.navigateTo、wx.switchTab、wx.redirectTo和wx.navigateBack,包括它们的使用场景和注意事项。wx.navigateTo用于保留当前页面并跳转,wx.switchTab用于切换tabBar页面,wx.redirectTo关闭当前页面并跳转,wx.navigateBack则用于返回上一页面。同时,文章强调了页面栈管理和避免直接修改页面栈的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

<navigator url="test?id=1" >跳转到新页面navigator>
.    res.eventChannel.emit('acceptDataFromOpenerPage', {      data: 'test' })}

2、wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

<navigator url="/index" open-type="switchTab">切换 Tabnavigator>
wx.switchTab({
url: '/index'
})

3、wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

<navigator url="test?id=1" open-type="redirect">在当前页打开navigator> 
wx.redirectTo({
url: 'test?id=1'
})

4、wx.navigateBack(Object object)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,

而 redirectTo 方法则不会。见下方示例代码


// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})

注:

getCurrentPages()

获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

b9f47ab2f9a81b499e7ff8851350d7dd.png

可通过 getCurrentPages 的length,决定需要返回几层

注意:不要尝试修改页面栈,会导致路由以及页面状态错误。

  •    不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

1dfaab6701f7639054b6aace1f5939a1.gif

f6883517708954de566f5b83ef63421f.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值