UniApp 中页面跳转的方法及传值

一、UniApp 中页面跳转的方法及特点

(一)常见的页面跳转方法

  1. uni.navigateTo
    • 用途:用于跳转到应用内的某个页面,非 tabBar 页面,它会保留当前页面,打开新的页面并推入页面栈中。
    • 特点:可以通过页面栈管理返回原页面,在新页面返回时可以返回到原页面继续操作流程。
  2. uni.redirectTo
    • 用途:关闭当前页面,重定向到应用内的某个页面(非 tabBar 页面)。
    • 特点:与 uni.navigateTo 的区别在于它不能返回原页面,而是直接替换当前页面进行跳转。
  3. uni.reLaunchLaunch
    • 用途:关闭所有页面,打开到应用内的某个页面。
    • 特点:可以跳转到任意页面并清空所有历史页面栈,常用于应用的重启或者跳转到首页等场景。
  4. uni.navigateBack
    • 用途:用于关闭当前页面,返回上一页面或多级页面(通过设置 delta 参数来控制返回的页面层级数量)。通常用于在页面栈中进行返回操作,比如从一个详情页面返回到列表页面。
    • 特点:只能返回到已经存在于页面栈中的页面,并且无法直接跳转到 tabBar 页面(底部导航栏定义的页面)。
  5. uni.switchTab
    • 用途:专门用于跳转到 tabBar 页面(即应用底部导航栏所定义的那些页面),并且会关闭所有非 tabBar 页面。它是用于在 tabBar 页面之间进行切换的方法。
    • 特点:只能跳转到 tabBar 页面,并且会清除非 tabBar 页面的历史记录,直接切换到指定的 tabBar 页面并重新加载该页面。

(二)页面跳转传值的方法

1、使用路由参数传递简单数据:

对于 uni.navigateTouni.redirectTouni.reLaunch 等跳转方法,可以在跳转的目标页面路径后面直接拼接参数。

例如:

 // 假设要跳转到名为 pageB 的页面并传递一个名为 id 的参数值为 123uni.navigateTo({url: '/pages/pageB/pageB?id=123'});
在目标页面的 onLoad 生命周期函数中接收参数:
 export default {onLoad(options) {if (options.id) {const idValue = options.id;console.log(idValue);}}};

2、使用全局变量或状态管理工具传递复杂数据:

  • 如果需要传递复杂的对象或大量数据,可以借助全局变量或者状态管理工具(如 Vuex)。
  • 例如使用 Vuex:
  • 在源页面的某个方法中通过 commit 一个 mutation 来将数据存储到 Vuex store 中:
   import { mapMutations } from 'vuex';export default {methods: {...mapMutations(['setData']),goToTargetPage() {const complexData = { key: 'value', array: [1, 2, 3] };this.setData(complexData);uni.navigateTo({url: '/pages/targetPage/targetPage'});}}};
  • 在 Vuex store 中定义 mutation 和 state 来处理数据存储:
   import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {dataToShare: null},mutations: {setData(state, data) {state.dataToShare = data;}}});export default store;
  • 在目标页面中从 Vuex store 中获取数据:
   import { mapState } from 'vuex';export default {computed: {...mapState(['dataToShare'])},onLoad() {console.log(this.dataToShare);}};

3、使用本地存储传递数据

  • 可以在源页面将数据存储到本地存储(uni.setStorage 或 uni.setStorageSync)中,然后在目标页面读取(uni.getStorage 或 uni.getStorageSync)。
  • 例如在源页面存储数据
   const dataToPass = { name: 'example', age: 20 };uni.setStorageSync('sharedData', dataToPass);uni.navigateTo({url: '/pages/targetPage/targetPage'});
  • 在目标页面获取数据:
   export default {onLoad() {const data = uni.getStorageSync('sharedData');console.log(data);}};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53137.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

8月刷题笔记

刷题笔记—8月 LCP40.心算挑战(贪心、排序) class Solution { public:int maxmiumScore(vector<int>& cards, int cnt) {//24.8.1ranges::sort(cards, greater()); //从大到小排序int s reduce(cards.begin(), cards.begin()cnt, 0);if(s%2 0) return s;auto rep…

无线麦克风哪个牌子的好,麦克风哪个好,无线麦克风品牌推荐

​在自媒体日益繁荣的当下&#xff0c;内容创作成为了许多人追求的目标。对于视频内容创作者而言&#xff0c;出色的内容是成功的基石&#xff0c;而高质量的设备则是保证作品品质的关键。为了提升视频音质&#xff0c;拥有一款专业的无线麦克风是不可或缺的。 然而&#xff0…

PHP智能匹配轻松预订自习室在线订座系统小程序源码

智能匹配&#xff0c;轻松预订——自习室在线订座系统 &#x1f4da;【开篇&#xff1a;告别排队&#xff0c;迎接智能学习新时代】&#x1f4da; 还在为找不到合适的自习室座位而烦恼吗&#xff1f;是不是每次去图书馆或自习室都要提前好久去排队占位&#xff1f;现在&#…

Python教程:面向对象

模块3&#xff1a;Python高级 模块概述 本课程旨在介绍Python编程语言中的面向对象编程&#xff08;OOP&#xff09;概念和技术。学生将学习如何使用类、对象、继承、多态等OOP的关键要素来构建灵活、可重用和可扩展的代码。通过实际编程练习和项目&#xff0c;学生将提高他们…

太速科技-1路万兆光纤SFP+和1路千兆网络 FMC子卡模块

1路万兆光纤SFP和1路千兆网络 FMC子卡模块 一、概述 该板卡是基于kc705和ml605的fmc 10g万兆光纤扩展板设计&#xff0c;提供了1路万兆光纤SFP和1路千兆网络接口。可搭配我公司开发的FPGA载卡使用。载卡可参考&#xff1a;ID204 SFP&#xff08;10 Gigabit Small…

AWS-亚马逊网络服务(基础服务)-AWS 定价计算器-概述与动手部署:

让我们来概述并亲身实践如何使用 AWS 定价计算器来计算 概述&#xff1a; AWS 定价计算器是 Amazon Web Services (AWS) 提供的基于 Web 的工具&#xff0c;可帮助用户估算其特定用例的 AWS 服务成本。欢迎来到雲闪世界。 它允许客户建模他们的基础设施并根据他们打算使用的…

Android 9.0 增加interface audio接口,解决编译报错

最近修改Android接口&#xff0c;报了一个VNDK的错误 我总结了如下几种方式&#xff1a; 1、直接关闭&#xff08;不推荐&#xff09;&#xff1a; 在BoardConfig.mk中加入如下两行&#xff0c;可以在编译的时候不去check VNDK&#xff0c;关掉这个可能会导致XTS某些测项跑不…

Burp Suite Professional 2024.8 for macOS x64 ARM64 - 领先的 Web 渗透测试软件

Burp Suite Professional 2024.8 for macOS x64 & ARM64 - 领先的 Web 渗透测试软件 世界排名第一的 Web 渗透测试工具包 请访问原文链接&#xff1a;https://sysin.org/blog/burp-suite-pro-mac/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页…

Linux内核编程(十五)网络设备驱动

本文目录 一、常见的网络协议二、传输介质三、RJ-45接口 对于网络知识不太熟悉的同学可以查看这篇文章&#xff1a;计算机网络知识点详情总结。 一、常见的网络协议 TCP、UDP协议&#xff1a;详情查看-TCP、UDP系统编程。DNS协议&#xff1a;是互联网中用于将域名&#xff08…

RocketMQ集群搭建,及RocketMQ-Dashboard部署(前RocketMQ-Console)

集群搭建 RocketMQ不支持单主机搭建主从结构集群&#xff0c;当从节点启动时&#xff0c;即使和主节点设置不同的监听端口&#xff0c;他也要去监听主节点端口&#xff0c;也就是说正常启动的从节点会监听四个端口。原因未知&#xff0c;现象后面会列举出来。 1. 准备JAVA环境…

python用波形显示udp数据实现一个模拟示波器

显示端代码: import socket import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np# UDP setup udp_ip = 0.0.0.0 # Listen on all network interfaces udp_port = 12345 sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)…

在 Ubuntu 环境下使用 VSCode 和 PlatformIO 下载程序到 Arduino Uno

安装 VSCode 访问 VSCode 官网 下载 .deb 包使用以下命令安装&#xff1a;sudo dpkg -i <下载的文件名>.deb sudo apt-get install -f安装 PlatformIO 扩展 在 VSCode 中&#xff0c;转到扩展市场&#xff08;CtrlShiftX&#xff09;搜索 “PlatformIO IDE”点击 “安装”…

STM32 HAL CAN (TJA1050CAN模块) 通讯(一)理论

1、简介 CAN具备多个设备交互的能力,但是网上大多是两个单片机进行交互,或者单片机通过CAN收发器与上位机进行交互测试,本次通过STM32cubeMX完成CAN通讯配置,并通过多个单片机进行数据交互测试。 2、CAN简介 CAN是一种串行通讯协议,主要有低速、高速CAN两种。 低速CAN…

相亲交友系统商业开发

在快节奏的现代生活中&#xff0c;寻找真爱成为了许多人的渴望。相亲交友系统&#xff0c;作为连接心灵的桥梁&#xff0c;正逐渐成为人们寻找伴侣的首选方式。我们的团队h17711347205致力于开发一款创新的相亲交友系统&#xff0c;旨在通过智能化的匹配算法&#xff0c;为用户…

Android UID 和 userID 以及 appID

我们知道Android 操作系统是基于Linux内核的&#xff0c;所以Android 的UID 是基于 Linux UID的。 Linux UID Linux 本身就是一个多用户操作系统&#xff0c;每一个用户都会有一个UID&#xff0c;不同UID 之间的资源访问是受限的。 其中&#xff0c;Linux的DAC权限模型&#…

this.$route.path 和 location.href获取的值不一样

引言&#xff1a; vue项目中动态加载路由组件this. r o u t e . p a t h 获取不正确&#xff08;获取是‘ / ‘而不是‘ / f o r g e t P w d ’&#xff09;浏览器中的路由是 / f o r g e t P w d &#xff0c;路由全局钩子 r o u t e r . b e f o r e E a c h 得到的 p a t …

【UE5】控件蓝图——树视图(TreeView)的基本使用

目录 前言 效果 步骤 一、显示根节点 二、显示子节点 前言 我们在视口中添加1个方块&#xff0c;2个球体&#xff0c;5个圆柱 它们在大纲视图中的层级关系如下&#xff0c;那么如何将这种层级关系显示在树视图中是本篇文章要解决的问题。 效果 步骤 一、显示根节点 1…

[STM32]从零开始的STM32标准库环境搭建(小白向)

一、我们为什么要搭建STM32标准库开发环境 如果你对STM32有一定的了解&#xff0c;相信你已经认识了STM32的几种开发方式。基于STM32寄存器开发&#xff0c;基于ST官方的标准库开发&#xff0c;基于ST官方的HAL库开发。我们现在来了解一下这些库的优缺点。首先就是基于寄存器开…

macos USB外接键盘ctrl键绑定方法 解决外接USB键盘与mac键盘不一致问题

mac电脑外接USB键盘后我们需要修改一下 ctrl键的绑定后才符合我们的使用习惯,因为标准USB键盘和mac键盘上面的ctrl键是不一样的, mac上面的 command 键 对应我们USB键盘上面的 ctrl 键. 修改方法: 偏好设置 --> 键盘 点击修饰键 后 选择键盘里面选择 USB键盘 ,然后调换…

Leetcode JAVA刷刷站(111)二叉树的最小深度

一、题目概述 二、思路方向 在Java中&#xff0c;要找出二叉树的最小深度&#xff0c;我们可以使用递归的方法。基本思路是&#xff0c;对于给定的根节点&#xff0c;如果它是空的&#xff0c;那么最小深度为0&#xff08;但实际上&#xff0c;空树没有深度&#xff0c;但在…