[Uniapp]携带参数跳转界面(两种方法)

一、方法1:路由携参

   假设现在有两个界面:界面A和界面B。并要由界面A跳转到界面B,则我们可以使用
                                                                uni.navigateTo({})

  跳转界面时,将参数附加在URL后,并在B界面的onLoad()获取到这个参数

界面A的代码

<script>
	export default {
		data() {
			return {
				paramPageA: [],  //在A界面中定义的变量,一会要传送给界面B
			}
		},
		methods: {
			onGo() {
				uni.request({
					url: "接口地址",
					method: "GET",
					success(res) {
						this.paramPageA = res.data.data; 
						const paramJson = JSON.stringify(this.paramPageA);


                        //主要看下面这段代码
						uni.navigateTo({
							url: '/pages/PageB/PageB?
activityList='+encodeURIComponent(paramJson)                         
						})
                        //先把A界面要传送的参数转化成JSON形式
                        //然后以encodeURIComponent的形式拼接到URL后方传送
                        //主要看上面这段代码


					}

				});

			}
		}
	}
</script>

        界面B的代码

onLoad() {
			// 从URL参数中获取paramPageA,并解析为JSON对象  
			const paramPageB = decodeURIComponent(this.$route.query.paramJson);
			this.paramPageBJSon = JSON.parse(paramPageB);
            //界面B中定义的参数
			console.log("接收到的参数", this.paramPageJson);
		},

二、方法2:依靠全局变量传参

首先在main.js文件中这样定义全局变量

Vue.prototype.$globalData = {  //在此定义所有全局变量
	allUrl:"http://localhost:8888",   //统一URL地址
	myToken:null,   //校验token值
	paramPage:"",   //要传的参数
}

在界面A中这样修改全局变量

this.$globalData.paramPage = res.data.data;

之后在界面B中直接引用即可

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NLP深入学习:结合源码详解 BERT 模型(一)

文章目录 1. 前言2. BERT 关键流程2.1 整体流程2.2 Pre-training&#xff08;预训练&#xff09;2.2.1 Masked Language Model (MLM)2.2.2 Next Sentence Prediction (NSP) 2.3 Fine-tuning&#xff08;微调&#xff09; 3. 总结4. 参考 1. 前言 BERT&#xff08;Bidirectiona…

访问一次网站的全过程

目录 流程图&#xff1a; 一、应用层开始 1. 在浏览器输入https://www.baidu.com 2. DNS获取IP地址 3. 根据HTTP协议生成HTTP请求报文 应用层结束 二、传输层开始 4. TCP三次握手 传输层结束 三、网络层开始 5. IP寻址 6. ARP协议获取MAC地址 网络层结束 四、数据…

Linux中三次握手,四次挥手状态图,端口复用 半关闭状态,心跳包

tcp三次握手和四次挥手状态图&#xff1a; 为什么需要2MSL&#xff1a; 原因1&#xff1a;让四次挥手过程更加可靠&#xff0c;确保最后一个发送给对方的ACK到达&#xff1b;若对方没有收到ACK应答&#xff0c;对方会再次发送FIN请求关闭&#xff0c;此时在2MSL时间内被动关闭…

实际应用中运放里多余的引脚怎么处理?

实际应用中运放里多余的引脚怎么处理&#xff1f;-电子发烧友网 (elecfans.com)

Python实现图片(合并)转PDF

在日常的工作和学习过程当中,我相信很多人遇到过这样一个很普通的需求,就是将某一个图片转为PDF或者是将多个图片合并到一个PDF文件。但是,在苦苦搜寻一圈之后发现要么要下载软件,下载了还要注册,注册了还要VIP,甚至SVIP才能实现这样的需求! 今天,我带大家把这个功能打…

SSM整合项目(使用Vue3 + Element-Plus创建项目基础页面)

1.配置Vue启动端口 1.修改vue.config.js const {defineConfig} require(vue/cli-service) module.exports defineConfig({transpileDependencies: true }) module.exports {devServer: {port: 9999 //启动端口} }2.启动 2.安装Element Plus 命令行输入 npm install eleme…

css相邻元素边框重合问题,解决方案

1、如下图所示&#xff0c;在给元素设置边框后&#xff0c;相邻元素会出现重合的问题 2、解决方案 给每个元素设置margin-top以及margin-left为负的边框 <div style"width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;"><div style"border…

Python——读写属性

采用读写属性的目的就是把录入的数据控制在合理区间。 如&#xff1a;学生的年龄&#xff08;age&#xff09;&#xff0c;学生的身高&#xff08;height&#xff09;... 方法一&#xff1a;利用实例方法来控制 class Student:def __init__(self,name"",age0):self.…

docker离线搭建仓库

要在Docker中搭建本地仓库&#xff0c;可以按照以下步骤进行操作&#xff1a; 首先安装 Docker。根据不同的操作系统选择合适的版本并完成安装过程。打开命令行工具&#xff08;如Terminal或PowerShell&#xff09;&#xff0c;运行以下命令来创建一个新的容器并将其设置为本地…

基于yolov7与arduino的眼睛跟随模块

基于yolov7与arduino的眼睛跟随模块 整个模块的介绍摄像模块图片传输模块图像检测模块控制模块动力模块 整个模块的介绍 我们首先需要一个图片收集的模块来对当前的图片进行收集然后将图片传至服务端对图片中的眼睛利用YOLO进行检测最后将数据传至arduino使其控制动力模块来进…

物奇平台超距断连无蓝牙广播问题解决方法

是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,+群赠送语音信号处理降噪算法,蓝牙耳机音频,DSP音频项目核心开发资料, 物奇平台超距断连无蓝牙广播问题解决方法 一 问题反馈 二解决方法: 1 运行流程分析 对应代…

【RabbitMQ】RabbitMQ的交换机

交换机类型 在上文中&#xff0c;都没有交换机&#xff0c;生产者直接发送消息到队列。而一旦引入交换机&#xff0c;消息发送的模式会有很大变化&#xff1a;可以看到&#xff0c;在订阅模型中&#xff0c;多了一个exchange角色&#xff0c;而且过程略有变化&#xff1a; Pub…

数据结构与算法第三套试卷小题

1.删除链表节点 **分析&#xff1a;**首先用指针变量q指向结点A的后继结点B&#xff0c;然后将结点B的值复制到结点A中&#xff0c;最后删除结点B。 2.时间复杂度的计算 **分析&#xff1a;**当涉及嵌套循环的时候&#xff0c;我们可以直接分析内层循环即可&#xff0c;看内…

小白优化Oracle的利器”sqltrpt.sql”脚本

SQL调优顾问是Oracle自带的一个功能强大的内部诊断工具&#xff0c;用于对性能不佳的SQL语句给出优化建议。但如果从命令行调用它比较麻烦&#xff0c;幸运的是&#xff0c;Oracle提供了一个方便的内置脚本“sqltrpt.sql”&#xff0c;简化了调用过程。 sqltrpt.sql脚本位于Or…

实践:qemu 运行 linux riscv with AIA(APLICIMSIC)

RISCV架构 Linux AIA支持 目标&#xff1a;在 Qemu 中运行一个支持 riscv aia 的 linux 翻译参考自&#xff1a;https://lwn.net/Articles/963231/ 文章日期&#xff1a;2024年2月22日&#xff0c;星期四&#xff08;截至2024年3月&#xff0c;最新&#xff09; 这个网站里在不…

EasyExcel导出自定义表格

谈到新技术&#xff0c;每个人都会有点恐惧&#xff0c;怕处理不好。确实&#xff0c;第一次使用新技术会遇到很多坑&#xff0c;这次使用 EasyExcel 这个新技术去做 excel 导出&#xff0c;还要给表格加样式&#xff0c;遇到不同的版本问题&#xff0c;遇到颜色加错了地方&…

JavaEE企业开发新技术2

目录 2.7 Field类的基本概念 文字性概念描述&#xff1a; Field类 2.8 Field的基本操作-1 2.9 Field的基本操作-2 分析&#xff1a; 2.10 Field 的综合练习 总结&#xff1a; 和equals的区别&#xff1a; 使用 比较 使用equals比较 2.7 Field类的基本概念 文字性…

OpenCV 图像的几何变换

一、图像缩放 1.API cv2.resize(src, dsize, fx0,fy0,interpolation cv2.INTER_LINEAR) 参数&#xff1a; ①src &#xff1a;输入图像 ②dsize&#xff1a;绝对尺寸 ③fx&#xff0c;fy&#xff1a;相对尺寸 ④interpolation&#xff1a;插值方法 2.代码演示 import cv2 …

前端报错404,nginx正常、gateway没有转发请求

问题描述&#xff1a;前端报错 404 Not Found 原因&#xff1a;nacos中对应服务没有上线&#xff0c;下线后&#xff0c;可以启动本地服务&#xff0c;然后在测试上调试代码。&#xff01;&#xff01; 记住重启对应服务&#xff0c;也不会自动上线。

JVM的内存区域

JVM内存区域最粗略的划分可以分为堆和栈&#xff0c;当然&#xff0c;按照虚拟机规范&#xff0c;可以划分为以下几个、区域 Java虚拟机运行时数据区 JVM内存分为线程私有区和线程共享区&#xff0c;其中方法区和堆是线程共享区&#xff0c;虚拟机栈、本地方法栈和程序计数器是…