HBuilderX(uni-app)Vue3路由传参和接收路由参数!!

uni-app搭建小程序时候Vue3语法接收路由参数,去官方文档查看,是onLoad的option接收参数,我试过,接收不到,上网查各种方法也是不太行,最后自己琢磨出来了,这参数藏得还挺深!!

目录

一、路由携带参数 

二、另一个页面接收传递的参数

1、引入getCurrentInstance

2、打印getCurrentInstance().proxy.$scope

3、传过来的参数id就在getCurrentInstance().proxy.$scope.options.id


一、路由携带参数 

这个比较简单,官方文档也有写。

官方路由传参文档:

uni.navigateTo(OBJECT) | uni-app官网

const clickItem = (id) => {console.log("当前点击的商品下标是" + id);// UniApp页面跳转,携带参数uni.redirectTo({url: `/pages/shopdetail/shopdetail?id=${id}`});
};

二、另一个页面接收传递的参数

1、引入getCurrentInstance

getCurrentInstance() 返回的是当前组件的实例,它包含了很多关于组件的内部信息。你可以通过 instance.proxy 访问组件的公共属性。

import { ref, onMounted,getCurrentInstance } from 'vue'; // 引入 Vue 的钩子
onMounted(async() => {const instance= getCurrentInstance()console.log('getCurrentInstance()',instance);
})

 打印出来如下:

2、打印getCurrentInstance().proxy.$scope

const instance= getCurrentInstance().proxy.$scopeconsole.log('getCurrentInstance()',instance);

proxy 是 getCurrentInstance() 返回对象中的一个属性,允许你访问组件的公开属性和方法,例如访问 this.$routethis.$emit 等。proxy 是访问这些实例属性的推荐方式。

 uniapp和Vue3的区别:

在 Vue 3 中,$route 是由 Vue Router 提供的,用于访问当前路由的对象。在 UniApp 中,$scope 是每个页面实例的上下文对象。这个对象包含了页面的各种信息,比如页面的路由参数、页面的状态、以及一些页面生命周期的钩子函数。

  • $route:是 Vue Router 提供的,用于访问路由对象,通常在 Vue 3 中使用。
  • $scope:是 UniApp 提供的,代表页面实例的上下文。你可以通过 proxy.$scope.options 来访问路由参数。

getCurrentInstance().proxy.$scope打印出来如下:

3、传过来的参数id就在getCurrentInstance().proxy.$scope.options.id

const instance= getCurrentInstance().proxy.$scope.options.id
console.log('getCurrentInstance()',instance);

 getCurrentInstance().proxy.$scope.options打印出来如下:

getCurrentInstance().proxy.$scope.options.id打印出来如下:

 这小参数还挺能藏!!!!!试试携带多个参数:

也能获取到: 

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

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

相关文章

手机租赁系统开发全流程解析与实用指南

内容概要 在如今快速发展的科技时代,手机租赁系统已经成为一种新兴的商业模式,非常符合当下市场需求。那么,在开发这样一个系统的时候,首先要从需求分析和市场调研开始。在这一阶段,你需要了解用户需要什么&#xff0…

【Compose multiplatform教程】01 创建你的多平台项目 <官网搬运>

这是 “创建带有共享逻辑和用户界面的 Compose 多平台应用” 教程的第一部分。 第一步:创建你的多平台项目 第二步:探究可组合代码 第三步:修改项目 第四步:创建你自己的应用程序 在这里,你将学习如何使用 Kotlin 多平…

vue2:el-select中的@change事件如何传入自定义参数

在 Element UI 中,el-select 组件用于创建一个下拉选择框。当选项发生变化时,你可以使用 @change 事件来监听这个变化。默认传入的是选中项的值(如果是多选,则传入一个数组) 但是有些时候需要传入额外的自定义参数,可以通过如下方式实现 1、template中定义事件响应函数时…

鸿蒙元服务上架

鸿蒙元服务上架 一、将代码打包成 .app 文件1. 基本需求2. 生成密钥和证书请求文件3. 申请发布证书4. 申请发布Profile5. 配置签名信息6. 更新公钥指纹7. 打包项目成 .app 文件 二、发布元服务1. 进入应用信息页面2. 上传软件包3. 配置隐私协议4. 配置版本信息5. 提交审核&…

ubuntu检测是否已安装nvidia驱动以及产品类型

nvidia-sminvidia-smi 是 NVIDIA 提供的一个命令行工具,用于查看和管理 NVIDIA GPU 的状态。当你运行 nvidia-smi 命令时,它会显示当前系统中所有 NVIDIA GPU 的状态信息,包括 GPU 的使用率、温度、内存使用情况等。 有8个GPU nvcc -V查看c…

UnityShaderLab 实现程序化形状(一)

1.实现一个长宽可变的矩形: 代码: fixed4 frag (v2f i) : SV_Target{return saturate(length(saturate(abs(i.uv - 0.5)-0.13)))/0.03;} 2.实现一个半径可变的圆形: 代码: fixed4 frag (v2f i) : SV_Target{return (distance(a…

MySQL-DDL之数据表操作

文章目录 一. 表的创建1. 表的创建2. 栗子 二. 查看表1. 查看数据库中的所有表2. 查看表结构 三. 删除表1. 删除表 四. 修改表结构1. 添加字段2. 修改字段① 修改字段名字② 修改字段类型 3. 删除字段4. 修改表名 数据定义语言:简称DDL(Data Definition Language) 一…

大语言模型(LLM)与智能机器人的应用分析

系列文章目录 前言 近年来,大型语言模型(LLM)的集成彻底改变了机器人领域,使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响,并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…

【pyspark学习从入门到精通23】机器学习库_6

目录 分割连续变量 标准化连续变量 分类 分割连续变量 我们经常处理高度非线性的连续特征,而且只用一个系数很难拟合到我们的模型中。 在这种情况下,可能很难只通过一个系数来解释这样一个特征与目标之间的关系。有时,将值划分到离散的桶中…

Maven 安装配置(详细教程)

文章目录 一、Maven 简介二、下载 Maven三、配置 Maven3.1 配置环境变量3.2 Maven 配置3.3 IDEA 配置 四、结语 一、Maven 简介 Maven 是一个基于项目对象模型(POM)的项目管理和自动化构建工具。它主要服务于 Java 平台,但也支持其他编程语言…

使用C#通过ColorMatrix对象为图像重新着色

此示例产生了一些令人印象深刻的结果,但实际上非常简单。 它使用其他几个示例演示的 ImageAttribute 技术来快速操作图像的颜色。 下面的AdjustColor方法启动图像着色的过程。 // Adjust the images colors. private Image AdjustColor(Image image) {// Make the …

Flink 核心知识总结:窗口操作、TopN 案例及架构体系详解

目录 一、FlinkSQL 的窗口操作 (一)窗口类型概述 (二)不同时间语义下窗口实践 EventTime(事件时间) ProcessTime(处理时间) 二、窗口 TopN 案例解析 三、Flink架构体系 &…

如何部署FastAPI

环境: Win10 FastAPI 问题描述: 如何部署FastAPI 解决方案: FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,使用 Python 3.6 及更高版本。它的设计目的是提供简单且易于使用…

day10性能测试(2)——Jmeter安装环境+线程组+Jmeter参数化

【没有所谓的运气🍬,只有绝对的努力✊】 目录 1、LoadRunner vs Jmeter 1.1 LoadRunner 1.2 Jmeter 1.3 对比小结 2、Jmeter 环境安装 2.1 安装jdk 2.2 安装Jmeter 2.3 小结 3、Jmeter 文件目录结构 4、Jmeter默认配置修改 5、Jmeter元件、组…

Android显示系统(08)- OpenGL ES - 图片拉伸

Android显示系统(02)- OpenGL ES - 概述 Android显示系统(03)- OpenGL ES - GLSurfaceView的使用 Android显示系统(04)- OpenGL ES - Shader绘制三角形 Android显示系统(05)- OpenGL…

【工业机器视觉】基于深度学习的水表盘读数识别(4-训练与预测)

【工业机器视觉】基于深度学习的仪表盘识读(读数识别)(3)-CSDN博客 训练与预测 Ultralytics YOLO指的是由Ultralytics公司开发的一系列基于YOLO(You Only Look Once)架构的目标检测算法。YOLO是一种实时目标检测系统,它…

C语言——上下弹跳的小球

//上下弹跳的小球 #include<stdio.h> #include<stdlib.h> #include<windows.h> int main() {int i,j;int x5;int y10;int height20;int velocity1; //记录速度的变量while(1) {xxvelocity;system("cls"); //清屏函数for(i0;i<x;i) {printf…

河工oj第七周补题题解2024

A.GO LecturesⅠ—— Victory GO LecturesⅠ—— Victory - 问题 - 软件学院OJ 代码 统计 #include<bits/stdc.h> using namespace std;double b, w;int main() {for(int i 1; i < 19; i ) {for(int j 1; j < 19; j ) {char ch; cin >> ch;if(ch B) b …

如何利用DBeaver配置连接MongoDB和人大金仓数据库

最近根据国产化要求&#xff0c;需要使用国产数据库&#xff0c;但习惯使用DBeaver连接各种成熟的商业或开源数据库。因此&#xff0c;就想着如何继续基于该工具&#xff0c;连接MongoDB和人大金仓数据库&#xff0c;查了半天很多地方说法不统一&#xff0c;所以自己就简单整理…

esp32 OTA学习笔记

csv分区表中ota-0和ota-1存放程序 不超过1600kb的程序可以ota&#xff08;可手动划分&#xff09; 分区表中有 ota0和ota1两个数据分区。 ota是指先下载固件到ota1然后下次从ota1启动&#xff0c;回滚就是回到ota0 启动。 关于固件&#xff1a; bin文件可以用arduino生成也可以…