微信小程序页面跳转方法总结

一、JS文件中跳转

  • 1、wx.navigateTo

    • 「保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。」
    wx.navigateTo({
    url: 'page/home/home?user_id=111'
    })
    
  • 2、wx.redirectTo

    • 「关闭当前页面,跳转到应用内的某个页面。」
    wx. redirectTo({
    url: 'page/home/home?user_id=111'
    })
    
  • 3、wx.switchTab

    • 「跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面」
    wx. switchTab({
    url: 'page/index/index'
    })
    
  • 4、wx.navigateBack

    • 「关闭当前页面,返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈,决定需要返回几层。」
    wx.navigateBack({
    delta: 2
    })
    
  • 5、wx.reLaunch

    • 「关闭所有页面,打开到应用内的某个页面」
    wx. reLanch({
    url: 'page/index/index'
    })
    

二、wxml 页面组件跳转「navigator组件」

  • 1.open-type 有效值:navigate --->>对应wx.navigateTo

  • 1.open-type 有效值:redirect --->>对应wx.redirectTo

  • 1.open-type 有效值:switchTab --->>对应wx.switchTab

  • 1.open-type 有效值:reLaunch --->>对应wx.reLaunch

  • 1.open-type 有效值:navigateBack --->>对应wx.navigateBack

  • 1.open-type 有效值:exit----->>退出小程序,target="miniProgram"时生效

实例

//1.直接使用
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

//2.包裹控件使用
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button>在当前页打开</button>
</navigator>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容