小程序路由传参和获取页面栈方法

路由方法

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

1. wx.navigateTo
当需要从一个页面跳转到另一个页面，并且希望用户能通过返回按钮返回到前一个页面时使用

wx.navigateTo({
  url: '/pages/details/details?id=123', // 跳转到指定页面并传递参数
  success: function(res) {
    // 成功后的回调
    console.log('跳转成功');
  },
  fail: function(err) {
    // 失败后的回调
    console.log('跳转失败', err);
  }
});

// pages/details/details.js
Page({
  onLoad: function(options) {
    console.log(options.id); // 输出：123
    this.setData({
      itemId: options.id
    });
  },
  data: {
    itemId: null
  }
});

2. wx.redirectTo
当跳转后不希望用户返回到前一个页面时使用，如跳转到登录页后不希望用户返回 

wx.redirectTo({
  url: '/pages/login/login',
  success: function(res) {
    console.log('重定向成功');
  },
  fail: function(err) {
    console.log('重定向失败', err);
  }
});

3. wx.switchTab 
当需要切换底部的 tab 页时使用

wx.switchTab({
  url: '/pages/home/home',
  success: function(res) {
    console.log('切换 Tab 成功');
  },
  fail: function(err) {
    console.log('切换 Tab 失败', err);
  }
});

4. wx.reLaunch
清除整个页面栈并跳转的场景，例如在用户成功登录后，重置应用的导航栈并跳转到首页

wx.reLaunch({
  url: '/pages/home/home',
  success: function(res) {
    console.log('重启应用成功');
  },
  fail: function(err) {
    console.log('重启应用失败', err);
  }
});

5. wx.navigateBack
返回到前一个或前几个页面，通过 delta 参数可以指定返回的层级数

wx.navigateBack({
  delta: 1, // 返回上一页面
  success: function(res) {
    console.log('返回成功');
  },
  fail: function(err) {
    console.log('返回失败', err);
  }
});

获取页面栈

wx.getCurrentPages()
假设在一个页面 details 中获取页面栈，bubu获取首页的页面实例栈顶的页面是当前显示的页面

// pages/details/details.js
Page({
  onLoad: function(options) {
    const pages = wx.getCurrentPages(); // 获取页面栈
    console.log(pages); // 输出当前页面栈

    const currentPage = pages[pages.length - 1]; // 获取当前页面
    const previousPage = pages[pages.length - 2]; // 获取上一个页面

    console.log('当前页面:', currentPage.route); // 输出当前页面的路径
    console.log('上一个页面:', previousPage.route); // 输出上一个页面的路径

    // 假设我们想在上一个页面上设置一些数据
    if (previousPage) {
      previousPage.setData({
        someData: '来自详情页的数据'
      });
    }
  }
});