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.$scope
	console.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打印出来如下:

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

也能获取到: 

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

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

相关文章

操作系统(1)OS的基本概念

一、定义 操作系统(OS)是控制和管理整个计算机系统的硬件与软件资源,并合理地组织、调度计算机的工作与资源的分配,进而为用户和其他软件提供方便接口与环境的程序集合。它是计算机系统中最基本的系统软件。 二、功能 资源管理&am…

gridcontrol多行表头

效果如下 只需这样做,设置该属性为对应的值

Formality:set_svf命令

相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 svf文件的全称是Setup Verification for Formality,即Design Compiler提供给Formality的设置验证文件,它的作用是为Formality的指导模式(Gui…

【蓝桥杯每日一题】重新排序

重新排序 2024-12-8 蓝桥杯每日一题 重新排序 前缀和 差分 题目大意 给定一个数组 A 和一些查询 L i , R i Li_,R_i Li,​Ri​, 求数组中第 L i L_i Li​至第 R i R_i Ri​个元素之和。 小蓝觉得这个问题很无聊, 于是他想重新排列一下数组, 使得最终每个查 询结果的和尽可能…

LabelImg使用教程

(yolov5scondaPython3123) D:\PyCharm20240724\20240724PyCharmProject>conda.bat deactivate D:\PyCharm20240724\20240724PyCharmProject>conda activate labelimg_env (labelimg_env) D:\PyCharm20240724\20240724PyCharmProject> labelimg 创建快捷键方式

洛谷 P1179 [NOIP2010 普及组] 数字统计 C语言

题目&#xff1a; https://www.luogu.com.cn/problem/P1179 思路&#xff1a;直接暴力过 代码&#xff1a; #include<iostream> using namespace std; int cnt(int x) {int sum 0;while(x){int temp x %10;if(temp 2){sum;}x x/10;}return sum; } int main(void) …

练9:进制转换

欢迎大家订阅【蓝桥杯Python每日一练】 专栏&#xff0c;开启你的 Python数据结构与算法 学习之旅&#xff01; 文章目录 1 进制转换2 例题分析 1 进制转换 ①任意制转为十进制 【示例】 ②十进制转为任意制 【法一】 【法二】 2 例题分析 题目地址&#xff1a;https:/…

【ComfyUI+多视图生成】MV-Adapter:多视图一致性图片生成(2024.12.09基于SDXL开源)

源码&#xff1a;https://github.com/huanngzh/MV-Adapter ComfyUI扩展&#xff1a;https://github.com/huanngzh/ComfyUI-MVAdapter 项目主页&#xff1a;https://huanngzh.github.io/MV-Adapter-Page/ 论文&#xff1a;2412.MV-Adapter: Multi-view Consistent Image Generat…

《机器学习》2.4假设检验 t分布 F分布

目录 t发布 注意是这个东西服从t分布 数据服从t分布通常是在以下情况下&#xff1a; 以下是一些具体的例子&#xff0c;说明在何种情况下数据会服从t分布&#xff1a; t检验 交叉验证t检验 样本方差​编辑 F分布&#xff08;fisher Friedman检验是一种非参数统计方法&a…

图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序,GUI界面。附详细的运行说明。

图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序&#xff0c;GUI界面。附详细的运行说明。 目录 图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序&#xff0c;GUI界面。附详细的运行说明。预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab基…

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之计数器与累加器(一)

学习背景&#xff1a; 在现实生活中一些需要计数的场景下我们会用到计数器&#xff0c;如空姐手里记录乘客的计数器&#xff0c;跳绳手柄上的计数器等。累加器是累加器求和&#xff0c;以得到最后的结果。计数器和累加器它们虽然是基础知识&#xff0c;但是应用广泛&#xff0…

计算机毕业设计Python动物图像识别分类系统 机器学习 深度学习 数据可视化 爬虫 卷积神经网络CNN 预测算法 图像识别

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

ASP.NET Core API + MySql

环境 数据库&#xff1a; mysql8.0 后端&#xff1a; vs2022 ASP.NET Core API .net 8 前端&#xff1a; Hbuilderx bootstrap 5.3.0 jquery v3.7.1 bootstrap-table 1.23.5 创建项目 添加资源包 AutoMapper Microsoft.EntityFrameworkCore.Tools 8.0.0 Pomelo.EntityFramew…

vmware vsphere5---部署vCSA(VMware vCenter Server)附带第二阶段安装报错解决方案

声明 因为这份文档我是边做边写的&#xff0c;遇到问题重新装了好几次所以IP会很乱 ESXI主机为192.168.20.10 VCSA为192.168.20.7&#xff0c;后台为192.168.20.7:5480 后期请自行对应&#xff0c;后面的192.168.20.57请对应192.168.20.7&#xff0c;或根据自己的来 第一阶段…

【QT】:QT(介绍、下载安装、认识 QT Creator)

背景 &#x1f680; 在我们的互联网中的核心岗位主要有以下几种 开发&#xff08;程序员&#xff09;测试运维&#xff08;管理机器&#xff09;产品经理&#xff08;非技术岗位&#xff0c;提出需求&#xff09; 而我们这里主要关注的是开发方向&#xff0c;开发岗位又分很…

STM32 出租车计价器系统设计(一) 江科大源码改写

STM32 出租车计价器系统设计 功能目标 驱动步进电机模拟车轮旋转&#xff0c;并实现调速功能。 设置车轮周长和单价&#xff0c;检测车轮转速和运转时间。 计算并显示行驶里程和价格。 硬件材料 28BYJ48 五线四相步进电机和 ULN2003 驱动板模块 测速传感器模块 嵌入式小系统…

Datawhale AI冬令营(第一期)--零基础定制你的专属大模型

本文主要简述如何快速完成和一些小细节 第一步下载嬛嬛数据集 数据来源&#xff1a;self-llm/dataset/huanhuan.json at master datawhalechina/self-llm GitHub 注意:1.一定是数据集下载完成一定是.json结尾的 2.这个是github的网址&#xff0c;可能会遇到打不开的情况 …

Android 车载虚拟化底层技术-Kernel 5.10 -Android12(multi-cards)技术实现

详细代码实现见 Android Display Graphics系列文章-汇总​​​​​​Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 本文主要包括部分&#xff1a; 一、Android12的Kernel 5.10版本 1.1 Kernel 5…

qemu安装arm64架构银河麒麟

qemu虚拟化软件&#xff0c;可以在一个平台上模拟另一个硬件平台&#xff0c;可以支持多种处理器架构。 一、安装 安装教程&#xff1a;https://blog.csdn.net/qq_36035382/article/details/125308044 下载链接&#xff1a;https://qemu.weilnetz.de/w64/2024/ 我下载的是 …

前端入门之VUE--vue组件化编程

前言 VUE是前端用的最多的框架&#xff1b;这篇文章是本人大一上学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 文章目录 2、Vue组件化编程2.1、组件2.2、基本使用2.2.1、VueComponent 2、Vue组件化编程 2.1、组件 组件&#xff1a;用来实现…