前言

  首先，微信页面跳转的是一个页面栈进栈出栈的过程，也可以简单的理解对页面跳转的操作就是一个栈的操作。

微信小程序主要一下两类样式的跳转（JS、WXML控件）：

<font color=red>JS控制的跳转：</font>

• navigation 栈的形式（导航栏）
• tabBar 标签栏
• 其他

<font color=red>WXML模板内控件控制的跳转方法</font>

• navigator

一、navigation页面跳转

1.wx.navigateTo({ url: 'pageA' })

navigateTo方式 跳转的应用内非 tabBar 的页面的路径，页面之间不能像IOS或者Android对页面进行赋值进行传递对象，只能像Web的URL地址一样，在路径后可以带参数。

1）参数和路径之间使用？分隔，参数键与参数值用=相连。

wx.navigateTo({
  url: 'pageA?id=1'
})

2）不同参数用&分隔

wx.navigateTo({
  url: 'pageA?id=1&token=222'
})

navigateTo的导航栏默认有返回按钮，返回到上一个页面。

2.wx.navigateBack({})

navigateBack和navigateTo是一对，navigateTo是页面进栈操作，navigateBack是页面出栈操作。navigateBack默认返回到上一级页面（内部参数：delta：1）。

// 此处是A页面    
wx.navigateTo({
  url: 'B'
})
 
// 此处是B页面
wx.navigateTo({
  url: 'C'
})
 
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
    // delta > 2 都会返回A页面    A页面之前没有navigate的页面
})

二、tabBar页面跳转

tabBar中的页面需要在app.json中配置，tabBar页面最少2页面，最多5个页面。tabBar之间的跳转采用wx.switchTab({ url: '' })的方式，默认情况下tabBar之间的页面跳转，只需要点击tabBar上对应的控件就可以相互跳转。（注：tabBar之间的跳转，路径后不能带参数）

wx.switchTab({
      url: 'switchA',
  })

tabBar上的页面的跳转只能采用switchTab的方式。其他页面跳转到tabBar上也必须采用switchTab的方式跳转。

三、其他页面跳转

1.wx.redirectTo({url: ''})（<font color=#0099ff>跳转的下一个页面，存在默认返回按钮<font>）

redirectTo跳转非tabBar页面的路径，路径后可以带参数。（带参数可以参考：navigateTo）

wx.redirectTo({
  url: 'redirectA?id=1'
})

跳转下一个页面默认有返回按钮，返回到上一个页面的再上一层。

2.wx.reLaunch({url: ''})（<font color=#0099ff>跳转的下一个页面，有一个返回首页的按钮<font>）

redirectTo跳转非tabBar页面的路径，路径后可以带参数。（带参数可以参考：navigateTo）

wx.reLaunch({
  url: 'reLaunchA?id=1'
})

跳转下一个页面默认有返回首页，返回到首页。（页面栈的第一个页面）

四、navigator组件---页面跳转（WXML内组件，其他的都是JS中操作）

navigator作为一个跳转的WXML模板中的控件，其他几种的操作都是在JS中的操作。下边详细介绍navigator控件的属性和使用说明

target 的合法值

open-type 的合法值：

version 的合法值

下面是navigator的例子：

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

微信小程序页面跳转的功能基本就这些内容，微信小程序页面跳转方式和Android、iOS的方式非常相似之处，可以相互结合理解。

本文章的内容参考自《微信官方文档》

持续更新中……