uniapp 跨页面传参的几种方式

当我们在开发Uni-app应用时,经常会遇到需要在不同页面之间传递参数的情况。为了实现跨页面传参,Uni-app提供了以下几种方式:

URL传参:这是一种简单且常用的方式。在跳转页面时,可以通过在URL中添加参数来传递数据。目标页面可以通过this.$route.query来获取参数。例如:

// 页面 A 中跳转到页面 B,并传递参数
uni.navigateTo({url: '/pages/b/b?id=123&name=张三',
});// 页面 B 中获取参数
console.log(this.$route.query.id); // 输出:123
console.log(this.$route.query.name); // 输出:张三

Vuex:Vuex是一种状态管理工具,用于在应用程序中管理全局状态。通过在Vuex的store中定义state和mutations,可以在不同页面之间共享数据。例如:

// 在 store 中定义 state、mutations 等
const store = new Vuex.Store({state: {userInfo: {},},mutations: {setUserInfo(state, payload) {state.userInfo = payload;},},
});// 在页面 A 中存储数据到 Vuex 中
store.commit('setUserInfo', { id: 123, name: '张三' });// 在页面 B 中获取 Vuex 中的数据
console.log(store.state.userInfo); // 输出:{ id: 123, name: '张三' }

EventBus:EventBus是一种简单而又实用的跨组件通信方式,可以帮助我们在不同页面之间进行数据传递。通过在Vue的原型上定义一个全局的Vue实例,我们可以在任意组件中触发和监听事件。例如:

// 在 main.js 中定义 EventBus
Vue.prototype.$eventBus = new Vue();// 在页面 A 中触发事件,并传递参数
this.$eventBus.$emit('userInfoChanged', { id: 123, name: '张三' });// 在页面 B 中监听事件,并获取参数
mounted() {this.$eventBus.$on('userInfoChanged', userInfo => {console.log(userInfo); // 输出:{ id: 123, name: '张三' }});
},

页面栈:Uni-app提供了一个页面栈,记录了当前应用程序中打开的所有页面。通过页面栈,我们可以实现页面之间的数据传递。例如:

// 在页面 A 中存储数据到页面栈中
uni.navigateTo({url: '/pages/b/b',success() {const pages = getCurrentPages();const prevPage = pages[pages.length - 2];prevPage.userInfo = { id: 123, name: '张三' };},
});// 在页面 B 中获取页面栈中的数据
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
console.log(prevPage.userInfo); // 输出:{ id: 123, name: '张三' }

以上是Uni-app中实现跨页面传参的几种方式。在实际开发中,我们可以根据具体需求选择合适的方式来传递参数。无论是URL传参、Vuex、EventBus还是页面栈,都能帮助我们实现页面之间的数据传递,提高开发效率。但要注意在使用过程中避免数据冲突和内存泄漏等问题。希望这篇文章对你有所帮助!

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

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

相关文章

Docker 发布自定义镜像到公共仓库

Docker 发布自定义镜像到公共仓库 引言 Docker 是一种轻量级、便携式的容器化技术,可以使应用程序在不同环境中更加可移植。在本文中,我们将学习如何使用 Docker 从公共仓库拉取 Nginx 镜像,定制该镜像,添加自定义配置文件&…

【Redis端口】通过修改端口一个计算机上可以运行两个redis

一个计算机上可以运行多个Redis实例。每个Redis实例都会监听一个特定的端口,所以只要确保每个实例使用的端口不冲突,就可以在同一台计算机上运行多个Redis实例。例如,你可以配置一个Redis实例监听6379端口,另一个Redis实例监听638…

卫星时钟服务器、NTP时钟服务器、GPS北斗网络时钟系统

卫星时钟服务器、NTP时钟服务器、GPS北斗网络时钟系统 卫星时钟服务器、NTP时钟服务器、GPS北斗网络时钟系统 卫星时钟服务器、NTP时钟服务器、GPS北斗网络时钟系统 应用背景 根据人民银行第2012年第8期《金融业信息安全风险提示》建议大力推广采用能够接收GPS和北斗时钟源信号…

Linux内核--进程管理(六)内核进程管理几种CPU调度策略

目录 一、引言 二、CPU调度的直观想法 ------>2.1、FIFO ------>2.2、Priority ------>2.3、调度矛盾 三、各种CPU调度算法 ------>3.1、FCFS(First Come,First Served) ------>3.2、SJF(Short Job First,短作业优先) ------>3.3、RR算法(按时间片…

Java-变量类型-分类

1 需求 2 接口 3 示例 public class RunoobTest {// 成员变量private int instanceVar;// 静态变量private static int staticVar;public void method(int paramVar) {// 局部变量int localVar 10;// 使用变量instanceVar localVar;staticVar paramVar;System.out.println(…

Pytest——Fixture夹具的使用

一、什么是Fixture 在测试开展的过程中,会需要考虑到测试前的准备工作,以及测试后的释放操作行为。这些在Pytest中,会通过Fixture的方式来实现。如果说在运行pytest的测试用例的时候,需要调用一些数据来实现测试行为,…

kubectl常用命令(主题篇)

上一篇是按照操作把全局性的命令给整理出来,但是在实际的使用中,经常需要对某一个主题进行操作,因此这一篇按照对应的主题进行一系列操作。 集群 查看集群基本信息 kubectl cluster-info namespace 命名空间 查看 kubectl get namespace k…

web3d-three.js场景设计器-TransformControls模型控制器

场景设计器-TransformControls 控制器 该控制器可以指定模型进入可控制模式-如图有三种控制方式 translate --移动模式 rotate -- 旋转模式 scale -- 缩放模式 方便布局过程中快捷对模型进行摆放操作。 引入方式 import { TransformControls } from three/examples/jsm/…

C# visual studio COM创建及调用

1.visual studuio操作 1.1visual Studio创建类库项目ClassLibrary1。 1.1.1ClassLibrary1项目Class1.cs内容如下: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.T…

torch.where用法介绍

torch.where用法1介绍 torch.where(condition, x, y) → Tensor这个用法介绍直接搜就可以,不做介绍 torch.where用法2介绍(在yolov8中计算TP中出现) torch.where(condition) → Tensor返回的condition中为True的索引 直接举一个例子吧 condition torch.tensor(…

50N65-ASEMI高压N沟道MOS管50N65

编辑:ll 50N65-ASEMI高压N沟道MOS管50N65 型号:50N65 品牌:ASEMI 封装:TO-247 连续漏极电流(Id):50A 漏源电压(Vdss):650V 功率(Pd):388W 芯片个数:2 引脚数量:…

项目知识—SSM及之后02

1、resultMap写的Base内容必须保证select都使用上 2、VALUE单个 ,VALUES多个

Nginx部署笔记

记录Nginx部署Vue项目的流程,以及部署后前端出现问题的解决方案。 目录 一、安装nginx 二、部署流程 三、解决前端路由history模式刷新页面404的问题 四、Nginx解决前端项目打包缓存问题 五、后话 一、安装nginx http://nginx.org/ ,找到页面右下角的d…

leetcode2975. 移除栅栏得到的正方形田地的最大面积

题目 有一个大型的 (m - 1) x (n - 1) 矩形田地,其两个对角分别是 (1, 1) 和 (m, n) ,田地内部有一些水平栅栏和垂直栅栏,分别由数组 hFences 和 vFences 给出。 水平栅栏为坐标 (hFences[i], 1) 到 (hFences[i], n),垂直栅栏为…

企业微信 get请求 设置可信域名

import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController;RestController public class ValidController {GetMapping("/xxxxx.txt")public String getText() {//返回下载的txt里的内容return &…

React 实现 Step组件

简介 本文将会实现步骤条组件功能。步骤条在以下几个方面改进。 1、将url与Step组件绑定,做到浏览器刷新,不会重定向到Step 1 2、通过LocalStorage 存储之前的Step,做到不丢失数据。 实现 Step.jsx (组件) import {useEffect, useState} fro…

Java并行流parallelStream()下InheritableThreadLocal引起的问题

Java并行流parallelStream()下InheritableThreadLocal引起的问题 引起问题的代码。 List orgs00 Arrays.asList(new Org("aaa"),new Org("bbb"),new Org("aa0"));List orgs orgs00.parallelStream() .map(org -> {// 模拟从数据库中获取 …

如何用致远OA连接电商、CRM实现高效营销

连接电商与CRM:高效营销的关键 在竞争激烈的商业环境中,电商企业迫切需要将其营销活动提升到更高的水平。利用致远OA连接电商平台与CRM系统,可以打造一个无缝的信息流,从而实现高效的营销策略。通过自动化的数据同步,…

车流量识别摄像机

车流量识别摄像机是一种利用先进的图像识别技术和智能算法来监测道路上车辆数量和流量的设备。通过安装在道路或交通路口的摄像头,可以实时准确地统计车辆的通过情况,进而为交通管理、道路规划以及交通安全提供重要数据支持。 车流量识别摄像机主要通过计…

机器学习的三个方面

1 机器学习的三个方面 1.1 数据 包括数据采集、增强和质量管理,相当于给人工智能模型学习什么样的知识 第一、什么专业的知识; 第二、知识是否有体系,也就是说样本之间是否存在某种关联、差异等,这个涉及到样本选择等问题&#x…