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

路由方法

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

1. wx.navigateTo

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

javascript 复制代码
wx.navigateTo({
  url: '/pages/details/details?id=123', // 跳转到指定页面并传递参数
  success: function(res) {
    // 成功后的回调
    console.log('跳转成功');
  },
  fail: function(err) {
    // 失败后的回调
    console.log('跳转失败', err);
  }
});
javascript 复制代码
// pages/details/details.js
Page({
  onLoad: function(options) {
    console.log(options.id); // 输出:123
    this.setData({
      itemId: options.id
    });
  },
  data: {
    itemId: null
  }
});

2. wx.redirectTo

当跳转后不希望用户返回到前一个页面时使用,如跳转到登录页后不希望用户返回

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

3. wx.switchTab

当需要切换底部的 tab 页时使用

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

4. wx.reLaunch

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

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

5. wx.navigateBack

返回到前一个或前几个页面,通过 delta 参数可以指定返回的层级数

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

获取页面栈

wx.getCurrentPages()

假设在一个页面 details 中获取页面栈,bubu获取首页的页面实例栈顶的页面是当前显示的页面

javascript 复制代码
// 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: '来自详情页的数据'
      });
    }
  }
});
相关推荐
幽络源小助理29 分钟前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
帅帅哥的兜兜34 分钟前
react中hooks使用
前端·javascript·react.js
吞掉星星的鲸鱼2 小时前
使用高德api实现天气查询
前端·javascript·css
lilye662 小时前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼4 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_4 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo5 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端7 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端