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

路由方法

  • 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: '来自详情页的数据'
      });
    }
  }
});
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构