路由导航

小程序中实现页面导航的两种方式

• 声明式导航
  • 在页面声明 <navigator> 导航组件
  • 点击 <navigator> 导航组件实现页面跳转
• 编程式导航
  • 调用小程序导航API（wx.navigatorTo...），实现页面跳转

声明式导航

tabBar页面导航

<navigator url="/page/home/home" open-type="switchTab">导航tabBar首页</navigator>

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

非tabBar页面导航

在导航非tabBar页面，只是open-type值不同，普通页面跳转设置为navigator或者不设置（默认值）

后退导航

如果要后退上一页或多级页面，则需要制定open-type属性和delta属性

• open-type值必须是navigateBack，表示后退导航
• delta值必须是数字，默认为1，表示后退层级

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

如果只是返回上一页，delta属性可以省略不写

编程式导航

tabBar页面导航

调用 wx.switchTab(Object object) 方法，可以导航到tabBar页面，object参数配置如下

//编程式导航-跳转tabBar页面
gotoHomePage(){
    wx.switchTab({
        url: '/page/home/home'
    })
}

非tabBar页面导航

调用 wx.navigateTo(Object object) 方法，可以导航到非tabBar页面，object参数配置如下

//编程式导航-跳转非tabBar页面
gotoInfoPage(){
    wx.navigateTo({
        url: '/page/info/info'
    })
}

后退导航

调用 wx.navigateBack(Object object) 方法，返回上一级或多级页面，object属性列表如下

//编程式导航-跳转非tabBar页面
goBack(){
    wx.navigateBack() //默认返回上一级
}

导航传参

声明式导航传参

navigator导航组件的url属性可以拼接携带参数

• 参数与路径用 ? 分割
• 参数键与参数值用 = 相连
• 不同参数用 & 分割

<navigator url="/page/home/home?name=zhangsan&age=18">携带参数跳转</navigator>

编程式导航传参

gotoHomePage(){
    wx.navigateTo({
        url:'/page/home/home?name=zhangsan&age=18'
    })
}

接收参数

在onLoad事件函数中直接获取

onLoad: function(opitons) {
    //options就是导航传递过来的参数对象
    console.log(options)
}