微信小程序页面导航方法以及区别

1、声明式导航

（1）导航到tabBar页面

tabBar页面指的是被配置了tabBar的页面

使用<navigator>组件跳转到指定的tabBar页面时，需要指定url和open-type属性

url表示要跳转的页面地址，必须以  /  开头

open-type表示跳转的方式，必须为switchTab

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

（2）导航到非tabBar页面

跳转到非tabBar页面，与跳转到tabBar页面不同的是

open-type必须为navigate

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

（3）导航传参

• 参数和路径之间使用？分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

  <navigator url="/pages/info/info?name=zs&age=20" >跳转到info页面</navigator>

  （4）后退导航

若要后退到上一页面或多级页面，则需要指定open-type属性和delta属性

open-type的值必须是navigateBack，表示要进行后退导航

delta的值必须是数字，表示要后退的层级

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

2、编程式导航

（1）导航到tabBar页面

（2）导航到非tabBar页面

（3）导航传参

（4）后退导航

3、在onLoad接收导航参数

data: {
    //导航传递过来的参数对象
    query:{}
}，

// 生命周期函数---监听页面加载
onLoad: function (options){
    this.setData{(
        query:options
     )}
}

 4、4种编程式导航的区别

（1）wx.switchTab(跳转主页)

跳转到tabBar页面，并关闭其他所有非tabBar页面，用于跳转到主页。

（2）wx.reLaunch(关闭所有页面跳转)

关闭所有页面，打开到应用内的某个页面

（3）wx.redirectTo(关闭当前页面跳转)

关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabBar页面

（4）wx.navigateTo(保留页面跳转)

保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面

如果该文章对你有帮助的话，不妨帮博主点个赞赞和关注趴~