微信小程序 页面导航、传参、接收参数

页面导航指的是页面之间的相互跳转，在微信小程序中，页面导航分为如下两种：

1、声明式导航：

在页面上声明一个<navigator>导航组件

通过点击<navigator>导航组件来实现页面跳转

 举例：如何使用<navigator>组件跳转tabBar页面？

在使用<navigator>组件跳转tabBar页面式，必须指明url和open-type属性

• url表示要跳转的页面地址，必须以 / 开头
• open-type表示跳转的方式，必须为switchTab

<navigator url="/pages/message/message"
open-type="switchTab">导航到首页</navigator>

举例：如何使用<navigator>组件跳转非tabBar页面？

非tabBar页面指的是没有配置在tabBar节点中的页面

与跳转到tabBar页面唯一的不同是open-type必须为navigate

<navigator url="/pages/info/info"
open-type="navigate">导航到信息</navigator>

注意：为了方便，在跳转到非tabBar页面时，open-type可以省略。

还有一种导航叫后退导航，后退到上一级或多级页面，需要指定open-type和delta属性

• open-type必须指定为navigateBack，表示要进行后退导航
• delta是整数数字，表示要后退的级数

<navigator open-type="navigateBack" delta="1">后退</navigator>

注意：为了方便，如果只是后退到上一个页面，delta可以省略，默认为1

2、编程式导航：

调用小程序的导航API，实现页面跳转

举例：如何使用编程式导航导航到tabBar页面？

在wxml页面

<button bindtap="gotoMessage">编程式跳转tab</button>

对应的js文件调用wx.switchTab：

gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  }

举例：如何使用编程式导航导航到非tabBar页面？

调用wx.navigateTo(Object object)，可以跳转到非tabBar页面

在wxml文件中

<button bindtap="gotoMessageNoTab">编程式跳转非tab</button>

对应的.js文件：

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

编程式导航进行后退导航，调用wx.navicateBack(Object object)，可以返回上一级页面或者多级页面，需要指明delta，默认为1，比较简单，此处不粘贴代码了。

3、如何使用页面传参和接收参数

• 声明式导航传参

<navicator>的url中可以携带参数

• 参数与路径之间使用？间隔
• 参数键值之间使用=连接
• 不同的参数之间使用&符号连接

<navigator url="/pages/info/info?name=啊宝&age=23"
open-type="navigate">导航到信息</navigator>

在info页面的.js文件中，使用options接收参数

  onLoad(options) {
    console.log(options)
    this.setData({
      query:options
    })
  }

• 编程式导航传参

gotoMessageNoTab(){
    wx.navigateTo({
      url: '/pages/info/info?name=三大爷&age=50',
    })
  }

参数接收方式与上述相同

有问题，下方留言，欢迎沟通交流。