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

路由方法

  • 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: '来自详情页的数据'
      });
    }
  }
});
相关推荐
小墨宝4 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED19 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿23 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子24 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6636 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet