15、页面导航

文档：
页面路由 | 微信开放文档

页面导航指的是页面之间的相互跳转。
例如浏览器的页面跳转：a标签、location.href

小程序的页面导航的方式：
1、声明式：在页面上使用<navigator>导航组件
2、调用小程序的导航API

声明式

说明文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
举例使用<navigator>组件跳转到tabBar页面，**url**必须以**/**开头，必须指定**open-type**属性为**switchTab**

tabBar表示小程序的底部菜单页面

<navigator url="/pages/index/index" open-type="switchTab">跳转到首页</navigator>

跳转非tabBar页面，例如跳转到二级信息页面：

<navigator url="/pages/info/info" open-type="navigate">跳转到信息页</navigator>

为了简单，在导航非tabBar页面的时候，open-type属性可以忽略。

如果希望回退页面，需要给<navigator>组件设置open-type属性为navigateBack，设置delta表示后退的层级：

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

如果后退一层页面，delta属性可以省略。

使用?携带参数：

<navigator url="/pages/info/info?currentPage=1&pageSize=10" open-type="navigate">跳转到信息页</navigator>

编程式

说明文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
通过调用wx.switchTab可以跳转到tabBar页面。

handleTapGoHomePage(){
  wx.switchTab({
    url: '/pages/index/index',
  })
}

调用wx.navigateTo可以跳转到非tabBar页面。

handleTapGoInfoPage(){
  wx.navigateTo({
    url: '/pages/info/info',
  })
}

调用wx.navigateBack可以后退页面。

handleTapGoBack() {
  wx.navigateBack({
    delta: 1
  })
}

使用?携带参数：

handleTapGoInfoPage(){
  wx.navigateTo({
    url: '/pages/info/info?currentPage=1&pageSize=10',
  })
}

导航参数

通过声明式导航和编程式导航携带过来的参数，可以在onLoad方法中获取：

/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  console.log(options); // {currentPage: "1", pageSize: "10"}
}