小程序路由

深藏阁楼爱情的钟 2021-09-17 09:34 357阅读 0赞

### 微信小程序 路由 ###

**wx.navigateTo：**

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

代码：
    
        wx.navigateTo({
          url: 'test?id=1'
        })
    
    
        //test.js
    
        Page({
          onLoad: function(option){
            console.log(option.query)
          }
        })
        //注意：目前页面路径最多只能十层。

**wx.redirectTo**

关闭当前页面，跳转到应用内的某个页面。

代码：
    
            wx.redirectTo({
              url: 'test?id=1'
            })

**wx.reLaunch**

关闭所有页面，打开到应用内的某个页面。

代码：
    
            wx.reLaunch({
              url: 'test?id=1'
            })
    
        //test.js
            Page({
              onLoad: function(option){
                console.log(option.query)
              }
            })

**wx.switchTab**

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

代码：
    
            {
              "tabBar": {
                "list": [{
                  "pagePath": "index",
                  "text": "首页"
                },{
                  "pagePath": "other",
                  "text": "其他"
                }]
              }
            }
            
    
            wx.switchTab({
              url: '/index'
            })

**wx.navigateBack**

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

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
    
    // 此处是B页面
    wx.navigateTo({
      url: 'C?id=1'
    })
    
    // 在C页面内 navigateBack，将返回A页面
    wx.navigateBack({
      delta: 2
    })

**官方文档**

[https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html\#wxrelaunchobject][https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_wxrelaunchobject]

作者：刘予川  
链接：https://www.jianshu.com/p/38bf65b116cd  
來源：简书

[https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_wxrelaunchobject]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxrelaunchobject