小程序几个页面跳转的区别

nav.wxml 导航页面 demo.wxml非导航页面

1、reLaunch 重启

跳转支持：导航页、非导航页，可传参

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump1">跳转 - reLaunch</button>
</view>

//index.js
Page({ 
  jump1() {    
    wx.reLaunch({
      url: '../nav/nav?t=reLaunch',
      //url: '../demo/demo?t=reLaunch',
    })
  }, 
})

2、switchTab 切换标签

跳转支持：只支持导航页，不支持传参，页面会提醒：wx.switchTab: url 不支持 queryString

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump2">跳转 - switchTab</button>
</view>

//index.js
Page({ 
  jump2() {
    wx.switchTab({
      url: '../nav/nav'
    })
  },
})

3、redirectTo 重定向

跳转支持：只支持 非导航页，支持传参

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump3">跳转 - redirectTo</button>
</view>

//index.js
Page({ 
  jump3() {
    wx.redirectTo({
      url: '../demo/demo?t=redirectTo',
    })
  },
})

4、navigateTo 导航到

跳转支持：只支持 非导航页，支持传参；也就是跟 redirectTo 一样，但是：带返回按钮 “<”，唯一的！

<!-- index.wxml -->
<view>
  <button bindtap="jump4">跳转 - navigateTo</button>
</view>

//index.js
Page({  
  jump4() {
    wx.navigateTo({
      url: '../demo/demo?t=navigateTo',
    })
  },
})

5、navigateBack

测试过程中，暂时只有通过 navigateTo 方式 跳转的页面，navigateBack 才会返回原页面，且不支持回传参数！

用例 6 的 <navigator> 也是一样的。

<!-- index.wxml -->
<view>
  <button bindtap="jump4">跳转 - navigateTo</button>
</view>

//index.js
Page({  
  jump4() {
    wx.navigateTo({
      url: '../demo/demo?t=navigateTo',
    })
  },
})

.

<!-- demo.wxml -->
<view> 
  <button bindtap="jumpBack">跳转 - navigateBack </button>
</view>

//demo.js
Page({ 
   jumpBack() {
    wx.navigateBack({
      url: '../index/index'
    })
  }
})

6、<navigator>

发现 跟 navigateTo 效果一样：只支持非导航页，能传参，跳转的页面，还带熟悉的返回按钮 “>”

<navigator url="../demo/demo?t=navigator">跳转</navigator>
其实，是因为 <navigator> 有个的属性 open-type，刚好他的默认值是：navigate，也就等同于：navigateTo

open-type 属性值：reLaunch | switchTab | redirect | navigate | navigateBack | exit

显而易见，这些属性，分别对等于上面例中的 reLaunch 、switchTab 、redirectTo、navigateTo、navigateBack；

exit 暂时无效，官网显示是 2.1 版本

ps：以上范例中，demo.wxml、nav.wxml 页面接收参数：

//导航页： nav.js

Page({
  onLoad: function (options) {
    console.log(options.t)
  }  
})

//非导航页： demo.js

Page({
  onLoad: function (options) {
    console.log(options.t);
  }
})