微信小程序页面导航

1. 什么事页面导航

页面导航指的是页面之间的互相跳转，例如，浏览器中实现页面导航的方式有 超链接、location.href等。

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

• 声明式导航： 在页面上声明一个navigator导航组件，通过点击navigator组件实现页面跳转
• 编程式导航： 调用小程序的导航API，实现页面的跳转

3. 声明式导航

3.1 导航到tabBar页面

• tabBar页面是指被配置为tabBar的页面
• 使用组件跳转tabBar页面时，需要指定url和open-type属性
• url：表示要跳转页面的地址，必须以/开头
• open-type:表示跳转的方式，必须为switchTab

3.2 导航到非tabBar页面

• 非tabBar页面是指没有配置为tabBar的页面
• open-type必须为navigate
• open-type默认为navigate

3.3 后退导航

• 如果需要后退上一页面或多级页面，需要配置open-type和delta属性
• open-type:必须为navigateBack,表示要进行后退导航
• delta：值为后退的层级，默认为1

4. 编程式导航

4.1 导航到tabBar页面

在函数中调用wx.switchTab()方法

    wx.switchTab({
        //要跳转到tabBar路径
         url: '/pages/cart/cart',
         success:()=>{},
         fail:()=>{},
       })

4.2 导航到非tabBar页面

调用wx.navigateTo()方法

 gotoInfo(){
       wx.navigateTo({
        //要跳转到非tabBar路径
         url: '/pages/info/info',
       })
   },

4.3 后退导航

    goBack(){
        wx.navigateBack({
        //delta默认为1
          delta: 1,
        })
    },

5. 导航传参

5.1 声明式导航传参

• 想要传参，可以在路径的后面携带数据，与浏览器中的get传参相同
• 参数与路径之间使用？分隔
• 参数键与参数值之间用=相连
• 不同参数用&分隔

<navigator url="/pages/info/info?name=ls&age=22" open-type="navigate">跳转到非tabBar页面</navigator>

5.2 编程式导航传参

• 在路径后添加数据

  gotoInfo(){
       wx.navigateTo({
         url: '/pages/info/info?name=zs&age=19',
       })
   },

5.3 接受参数

• 通过声明式导航与编程时导航传递的数据，在onLoad事件中获取，

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
    //将传递的数据赋值给data中定义的值，使其他方法可以间接访问
      this.setData({
          query: options
      })
    },