页面导航 是 页面之间的相互跳转，我们在浏览器中可以使用 a链接 与 location.href 进行跳转

在小程序中可以使用 声明式导航(navigator标签，类似于a标签) 与 编程式导航(使用小程序导航API，类似于location.href) 来跳转页面

目录

1  声明式导航（navigator标签）

1.1  tabBar之间的跳转

1.2  跳转到非tabBar页面

1.3  后退导航

1.4  导航传参

2  编程式导航

2.1  导航到tarBar页面 wx.switchTab()

2.2  导航到非tabBar页面 wx.navigateTo()

2.3  后退导航 wx.navigateBack()

2.4  导航传参

3  接收导航传递过来的参数

---

1  声明式导航（navigator标签）

1.1  tabBar之间的跳转

我们首先给一个页面tabBar

然后在这个页面上写一个 navigator 标签，当你的navigator标签的作用是tabBar切换的时候，那么你必须要写 open-type="switchTab"

点击跳转到主页后可以跳转到主页

1.2  跳转到非tabBar页面

现在我想跳到test这个页面

• 跳转到非tabBar页面的open-type值应该为navigate，由于open-type的默认值就是navigate，所以可以省略 open-type="navigate"

点击跳转到test可以跳转到test页面

点击页面的后退按钮可以后退到导航之前的页面

1.3  后退导航

我们在test中加入后退导航，delta是后退几层

• delta的默认值是1，如果就是想返回上一层，那么可以不用写delta

首先跳转到test

然后点击返回上一页

之后会跳转回来

1.4  导航传参

直接在url的后面写参数就行了

跳转之后选择 页面参数 ，可以看到当前页面的参数

2  编程式导航

2.1  导航到tarBar页面 wx.switchTab()

wx.switchTab()里面放对象，对象中可以添加4组键值对

• url 必选，跳转的地址
• success 成功后的回调函数
• fail 失败后的回调函数
• complete 无论成功或失败后都会执行的回调函数

点击跳转到主页可以跳转到主页

2.2  导航到非tabBar页面 wx.navigateTo()

wx.navigateTo()里面放对象，对象中可以添加4组键值对

• url 必选，跳转的地址
• success 成功后的回调函数
• fail 失败后的回调函数
• complete 无论成功或失败后都会执行的回调函数

点击跳转到test后可以跳转到test页面

2.3  后退导航 wx.navigateBack()

wx.navigateBack()里面放对象，对象中可以添加4组键值对

• delta 返回的页面数，默认值为1，如果delta大于现有的页面数则返回首页
• success 成功后的回调函数
• fail 失败后的回调函数
• complete 无论成功或失败后都会执行的回调函数

我们在test中搞一个按钮，点击按钮后回退到上一页

我们首先从这里跳转到test

然后点击test中的 返回上一页 按钮

发现可以跳转到上一页

2.4  导航传参

写在url里就行了

3  接收导航传递过来的参数

编程式导航与声明式导航接收方法相同，导航传递过来的参数可以在onLoad事件中获取到

一般我们会将options转存到data中，名称一般为query