【vue3|第18期】Vue-Router路由的三种传参方式
日期:2024年7月17日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、Vue-Router的三种传参方式
- 1、使用params传递参数
- (1)编程式路由传参
- (1-1)在组件中使用编程式路由传递参数
- (1-2)在目标组件中获取参数
- (2)声明式路由传参
- (2-1)在组件中使用声明式路由传递参数
- (2-2)在目标组件中获取参数
- 2、使用query传递参数
- (1)编程式路由传参
- (1-1)在组件中使用编程式路由传递参数
- (1-2)在目标组件中获取参数
- (2)声明式路由传参
- (2-1)在组件中使用声明式路由传递参数
- (2-2)在目标组件中获取参数
- 3、使用props传递参数
- (1)路由配置
- (1-1)params参数作为props传递给路由组件
- (1-2)query参数作为props传递给路由组件
- (2)在目标组件中接收参数
- (3)示例
- (3-1)用户列表组件
- (3-2)用户详情组件
- 三、结语
一、前言
在 vue3
中,vue-router
是用来管理前端路由的库。路由传参是指在页面间传递数据的一种常用方法,它可以帮助我们在不同的视图组件之间传递状态或数据。vue-router
提供了几种不同的方式来实现路由传参,包括 params
、query
和 props
。
二、Vue-Router的三种传参方式
1、使用params传递参数
params
是在路由配置中定义的动态段,它们不是 URL
的一部分,因此在刷新页面时不会丢失。params
通常用于传递路由路径中的参数。
说明:配置并创建路由
路径:\src\router\index.ts
import { createRouter, createWebHistory } from 'vue-router'// 路由配置
const routes = [{name:home,path: '/home',component: HomeView},{name:user,path: '/user/:userId',// 加?表示该传参为可选参数,如下,age为可选参数:// path: '/user/:userId/:age?', component: UserView}
];// 创建路由
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: routes
})export default router
(1)编程式路由传参
(1-1)在组件中使用编程式路由传递参数
路径:\src\views\HomeView.vue
// 在组件中使用编程式路由传递参数
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();router.push({// params 传递参数方式,不支持使用 path,只能用 namename: 'user',params: { userId: '123' }
});
</script>
(1-2)在目标组件中获取参数
路径:\src\views\UserView.vue
<script setup lang="ts"
相关文章:
【vue3|第18期】Vue-Router路由的三种传参方式
日期:2024年7月17日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.408…...
ElasticSearch(六)— 全文检索
一、match系列查询 前面讲到的query中的查询,都是精准查询。可以理解成跟在关系型数据库中的查询类似。match系列的查询,是全文检索的查询。会通过分词进行评分,匹配,再返回搜索结果。 1.1 match 查询 "query": {&qu…...
Oracle核心进程详解并kill验证
Oracle核心进程详解并kill验证 文章目录 Oracle核心进程详解并kill验证一、说明二、核心进程详解2.1.PMON-进程监控进程2.2.SMON-系统监控进程2.3.DBWn-数据库块写入进程2.4. LGWR-日志写入器进程2.5. CKPT-检查点进程 三、Kill验证3.1.kill ckpt进程3.2.kill pmon进程3.3.kill…...
【BUG】已解决:SyntaxError:positional argument follows keyword argument
SyntaxError:positional argument follows keyword argument 目录 SyntaxError:positional argument follows keyword argument 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,…...
怎样在 Nginx 中配置基于请求客户端 Wi-Fi 连接状态的访问控制?
🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会! 文章目录 怎样在 Nginx 中配置基于请求客户端 Wi-Fi 连接状态的访问控制一、理解请求客户端 Wi-Fi 连接状态二、Nginx 中的访问控制基础知识三、获取客户端 Wi-Fi 连接状态…...
逆向案例二十九——某品威客登录,请求头参数加密,简单webpack
网址:登录- 一品威客网,创新型知识技能共享服务平台 抓到登陆包分析,发现请求头有参数加密,直接搜索 定位到加密位置,打上断点,很明显是对象f的a方法进行了加密。 往上找f,可以发现f被定义了,是…...
河道高效治理新策略:视频AI智能监控如何助力河污防治
一、背景与现状 随着城市化进程的加快,河道污染问题日益严重,对生态环境和居民生活造成了严重影响。为了有效治理河道污染,提高河道管理的智能化水平,TSINGSEE青犀提出了一套河污治理视频智能分析及管理方案。方案依托先进的视频…...
[React]如何提高大数据量场景下的Table性能?
[React]如何提高大数据量场景下的Table性能? 两个方向:虚拟列表,发布订阅 虚拟列表 虚拟列表实际上只对可视区域的数据项进行渲染 可视区域(visibleHeight): 根据屏幕可视区域动态计算或自定义固定高度数据渲染项&…...
基于Vision Transformer的mini_ImageNet图片分类实战
【图书推荐】《PyTorch深度学习与计算机视觉实践》-CSDN博客 PyTorch计算机视觉之Vision Transformer 整体结构-CSDN博客 mini_ImageNet数据集简介与下载 mini_ImageNet数据集节选自ImageNet数据集。ImageNet是一个非常有名的大型视觉数据集,它的建立旨在促进视觉…...
JS中map()使用记录
优点和缺点 总的来说,map() 方法是一个强大的工具,适合于需要将数组中的每个元素转换为新形式的情况。然而,对于性能敏感的应用或需要更复杂控制逻辑的场景,可能需要考虑其他方法。 优点: 函数式编程风格:…...
JavaWeb学习——请求响应、分层解耦
目录 一、请求响应学习 1、请求 简单参数 实体参数 数组集合参数 日期参数 Json参数 路径参数 总结 2、响应 ResponseBody&统一响应结果 二、分层解耦 1、三层架构 三层架构含义 架构划分 2、分层解耦 引入概念 容器认识 3、IOC&DI入门 4、IOC详解 …...
Vue中!.和?.是什么意思
在Vue(或更广泛地说,在JavaScript和TypeScript中),!. 和 ?. 是两个与可选链(Optional Chaining)和断言非空(Non-null Assertion)相关的操作符,它们分别用于处理可能为nu…...
秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II,合并两个有序链表}
文章目录 引言复习堆堆——前K个高频元素个人实现复习实现二参考实现 新作单词搜索个人实现参考实现 分割回文串个人实现参考实现 环形链表II个人实现参考实现 两个有序链表个人实现 总结 引言 又是充满挑战性的一天,继续完成我们的任务吧!继续往下刷&a…...
android13禁用某个usb设备
总纲 android13 rom 开发总纲说明 目录 1.前言 2.触摸设备查看 3.功能修改 3.1 禁用usb触摸 3.2 禁用usb键盘 3.3 禁用usb遥感 4.查看生效与否 5.彩蛋 1.前言 用户想要禁止使用某些usb设备,需要系统不能使用相关的usb设备,例如usb触摸屏,usb键盘,usb遥感等等usb…...
tmux相关命令
tmux相关命令 1、tmux介绍2、会话(session)、窗口(windows)、窗格(pane)3、会话相关命令4、窗口相关命令5、窗格相关命令6、内容查看7、tmux配置文件 1、tmux介绍 略 2、会话(session…...
初创小程序公司怎么选服务器合作商
初创小程序公司怎么选服务器合作商?在移动互联网的浪潮中,小程序以其轻量、便捷、即用即走的特点,成为了众多初创企业快速触达用户、展现创意与服务的理想平台。然而,对于初创小程序公司而言,如何在纷繁复杂的服务器市…...
基于微信小程序+SpringBoot+Vue的自习室选座与门禁系统(带1w+文档)
基于微信小程序SpringBootVue的自习室选座与门禁系统(带1w文档) 基于微信小程序SpringBootVue的自习室选座与门禁系统(带1w文档) 本课题研究的研学自习室选座与门禁系统让用户在小程序端查看座位,预定座位,支付座位价格,该系统让用户预定座位…...
【Linux】进程IO|重定向|缓冲区|dup2|dup|用户级缓冲区|模拟缓冲区
目录 前言 重定向 实验一 为什么log.txt文件的文件描述符是1 为什么向stdout打印的信息也出现在文件中 实验二 用户级缓冲区 为什么要有用户级缓冲区 系统调用 dup 为什么close(fd1)之后还能向log.txt写入数据? dup2 缓冲区 观察现象 测试1 测试2 测…...
bug bug bug
importError: DLL load failed while importing _multiarray_umath: 找不到指定的模块。 Traceback (most recent call last): File "D:\yolov8_about\ultralytics-main3\trainCPU.py", line 4, in <module> from ultralytics import YOLO File "…...
医疗器械上市欧美,需要什么样的网络安全相关申报文件?
医疗器械在欧美上市时,需要提交的网络安全相关申报文件主要包括以下几个方面,这些要求基于欧美地区的法律法规和监管机构的指导文件。 一、美国FDA要求 1. 网络安全管理计划 内容:制造商需要提交一份网络安全管理计划,该计划应包含…...
【UbuntuDebian安装Nginx】在线安装Nginx
云计算:腾讯云轻量服务器 操作系统:Ubuntu-v22 1.更新系统软件包列表 打开终端并运行以下命令来确保你的系统软件包列表是最新的: sudo apt update2.安装 Nginx 使用以下命令安装 Nginx: sudo apt install nginx3.启动 Nginx…...
Jacoco 单元测试配置
前言 编写单元测试是开发健壮程序的有效途径,单元测试写的好不好可以从多个指标考量,其中一个就是单元测试的覆盖率。单元测试覆盖率可以看到我们的单元测试覆盖了多少代码行、类、分支等。查看单元测试覆盖率可以使用一些工具帮助我们计算,…...
App Instance 架构示例
前言 在Unity程序设计过程中,我们处理的第一个对象是Application Instance。 它的主要职责是启动流程管理、卸载流程管理,次要职责是管理在内部的子系统生命周期。其他职责,提供或桥接应用程序的配置信息、及其他第三方接口。 它通常以单例的…...
【论文速读】| MoRSE:利用检索增强生成技术填补网络安全专业知识的空白
本次分享论文:MoRSE: Bridging the Gap in Cybersecurity Expertise with Retrieval Augmented Generation 基本信息 原文作者:Marco Simoni, Andrea Saracino, Vinod Puthuvath, Maurco Conti 作者单位:意大利比萨国家研究委员会信息学与…...
pip install albumentations安装下载超级细水管
albumentations 是一个用于图像增强的 Python 库,它提供了丰富的图像变换功能,可以用于数据增强,从而提高深度学习模型的泛化能力。 直接安装命令: pip install albumentations但是如果半夜遇到这种19kB/s的下载速度 为头发着想&…...
驱动开发系列07 - 驱动程序如何分配内存
一:概述 Linux 内核提供了丰富的内存分配函数、在本文中,我们将介绍在设备驱动程序中分配和使用内存的方法,以及如何优化系统的内存资源。由于内核为驱动程序提供了统一的内存管理接口。所以我们不会去讨论不同架构是如何管理内存的,文本不涉及分段、分页等问题,此外在本文…...
【Jackson】注解及其使用
Jackson库提供了多种注解(annotations),可以用来控制JSON序列化和反序列化的行为。这些注解允许你灵活地映射Java对象与JSON数据之间的关系。下面将详细介绍一些常用的Jackson注解及其用法。 1. JsonProperty 作用: 用于指定JSON属性与Java…...
LeetCode24 两两交换链表中的节点
前言 题目: 24. 两两交换链表中的节点 文档: 代码随想录——两两交换链表中的节点 编程语言: C 解题状态: 没画图,被绕进去了… 思路 思路还是挺清晰的,就是简单的模拟,但是一定要搞清楚交换的…...
AI OS
一,概念 AI OS, 或AI for OS,也就是近一年来伴随着人工智能的热度而衍生出的一个新的概念 - 人工智能操作系统。 为什么提出AI OS的概念? 这是因为人工智能技术的发展势头太过迅猛,尤其在深度学习、大模型等AI技术的突破后&…...
Dubbo 黑白名单机制详解
在微服务架构中,服务间的安全和流量控制是非常重要的。在众多 Java 微服务框架中,Apache Dubbo 作为一款高性能的 RPC 框架,提供了丰富的功能来管理服务调用。在 Dubbo 中,黑白名单机制是保障服务安全性和可控性的一个重要手段。本…...
配电房智能巡检机器人怎么选?
智能巡检机器人行业发展现状 2022年中国智能巡检机器人市场规模达到了15.66亿元。其中:电力智能巡检机器人规模14.88亿元,其他智能巡检机器人规模为0.78亿元。2023年中国智能巡检机器人市场规模约为19.71亿元。其中:电力智能巡检机器人规模…...
husky引发git commit报错的解决方案
在git commit的时候,有可能会遇到这样的报错,husky - pre-commit hook exited with code 1 (error) 出现这个问题的原因主要是,假如项目中采用 husky和lint-staged结合进行代码校验,那么,只要项目代码中有不规范的地方…...
韩顺平0基础学Java——第37天
p736-758 MySQL三层结构 1.所谓安装Mysql数据库,就是在主机安装一个数据库管理系统(DBMS),这个管理程序可以管理多个数据库。DBMS(database manage system) 2.一个数据库中可以创建多个表,以保存数据(信息)。 3.数据库管理系统(DBMS)、数据库和表的关系…...
Layer2区块链扩容方案(1)——总述
写在前面 这篇文章作为一个简单介绍,很多技术只是大致提及或者引用,之后会在详细学习后逐项解释。 补充知识 在了解扩容方案之前,我们最好了解一些相关的知识概念 EVM “EVM” 是“Ethereum Virtual Machine”(以太坊虚拟机&…...
AWS监控工具,监控性能指标
执行AWS监视是为了跟踪在AWS环境中主动运行的应用程序工作负载和资源,AWS监视器跟踪各种AWS云指标,以帮助提高在其上运行的应用程序的整体性能。 借助阈值突破警报系统,AWS应用程序监控在识别性能瓶颈来源方面起着至关重要的作用,…...
义务外贸wordpress独立站主题
健身器材wordpress网站模板 跑步机、椭圆机、划船机、动感单车、健身车、深蹲架、龙门架、健身器材wordpress网站模板。 https://www.jianzhanpress.com/?p4251 农业机械wordpress网站模板 植保机械、畜牧养殖机械、农机配件、土壤耕整机械、农业机械wordpress网站模板。 …...
初等数论精解【4】
文章目录 算术基本定理基础理论整数运算规则1. 加法性质2. 减法性质3. 乘法性质4. 除法性质5. 其他性质 整数运算的性质整数构成域吗 参考文献 算术基本定理 基础 任何一个大于1的整数可以被分解为素因数的连乘积。 a p 1 p 2 . . . . p n ≥ 1 ap_1\times p_2....\times…...
MongoDB教程(二十二):MongoDB固定集合
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、固定集…...
20240724----idea的Java环境卸载与安装
1.删除旧有的jdk https://blog.csdn.net/weixin_42168713/article/details/112162099 (补充:我把用户变量和java有关的都删了) 2.下载新的jdk百度网盘链接 链接:https://pan.baidu.com/s/1gkuLoxBuRAtIB1IzUTmfyQ 提取码…...
C语言 ——— 函数指针数组的讲解及其用法
目录 前言 函数指针数组的定义 函数指针数组的使用 前言 数组是存放一组相同类型数据的存储空间 关于指针数组的知识请见:C语言 ——— 指针数组 & 指针数组模拟二维整型数组-CSDN博客 那么要将多个函数的地址存储到数组中,这个数组该如何定义…...
鸿蒙仓颉语言【cryptocj 库】(介绍与SHA、MD5、HMAC摘要算法)
cryptocj 库 介绍 cryptocj 是一个安全的密码库,包括常用的密码算法、常用的密钥生成和签名验证。 该库是对 C 语言的 openSSL 封装的仓颉加密算法 1 提供SHA、MD5、HMAC摘要算法。 前置条件:NA 场景: OHOS, Linuxÿ…...
设计App的后端接口分类以及环境依赖包详情
目录 App的后端接口分类 1. 用户登录与注册 2. 设备初始化 3. 广告与推广 4. 应用配置与功能 5. 支付系统 6. 内容分发 7. 资源下载 8. 视频内容 9. 用户行为分析 10. 安全与合规 设计建议 基于Easyswoole,可以在系统中引入需要的一些常见依赖包&#…...
接入百度文心一言API教程
然后,编辑文章。点击AI识别摘要,然后保存即可 COREAIPOWER设置 暂时只支持经典编辑器.古腾堡编辑器等几个版本后支持.在比期间,你可以自己写点摘要 摘要内容 AL识别摘要 清空 若有收获,就点个赞吧 接入文心一言 现在百度文心一言&…...
classfinal太强了,再也不怕被反编译了
这段时间在辛辛苦苦的编写一个算法程序,担心部署到客户服务器,客户反编译jar包,破解程序,那努力就白费了! 在网上查询,发现个好东东,classfinal可以加密jar包,防止反编译࿰…...
DP-适配器模式代码重新理解
package com.designpatterns.adapter;/*** 定义鸭子接口*/ public interface Duck {/*** 定义鸭子呱呱叫(quack)*/public void quack();public void fly(); }package com.designpatterns.adapter;/*** 实现一个绿头鸭*/ public class MallarDuck implements Duck{Overridepubl…...
minio安装小计一则
安装minio并且使用api方式对文件进行操作 本文使用docker安装 docker pull minio/minio docker pull minio/mc (mc为minio文件运行命令行工具) 使用如下命令运行Minio服务器容器: windwos powershell运行命令 docker run -p 9000:9000…...
# Redis 入门到精通(九)-- 主从复制(1)
Redis 入门到精通(九)-- 主从复制(1) 一、redis 主从复制 – 主从复制简介 1、互联网“三高”架构 高并发高性能高可用 2、你的“Redis”是否高可用? 1)单机 redis 的风险与问题 问题1.机器故障 现…...
SpringBoot整合ElasticSearch的elasticsearch-java出现jakarta.json.spi.JsonProvider报错问题
一、原因 报错内容如下 org.springframework.beans.factory.BeanCreationException: Error creating bean with name esClient defined in class path resource [com/elasticsearch/config/ElasticSearchConfig.class]: Bean instantiation via factory method failed; nes…...
git 操作汇总【迭代更新中】
文章目录 0x1初始化操作0x11 生成公钥0x12 配置账号和邮箱 0x20x21 拉取代码0x22 推送代码0x23 设置远端分支 0x30x31 提交mr 0x40x41 子模块0x42 子模块添加 0x1初始化操作 0x11 生成公钥 ssh-keygen0x12 配置账号和邮箱 git config --global user.name username git confi…...
看 Unity 组件的源码 —— ILSpy
ILSpy 是开源的 .NET 程序集浏览器和解编译器。 下载 ILSpy ILSpy Github 地址:icsharpcode/ILSpy: .NET Decompiler with support for PDB generation, ReadyToRun, Metadata (&more) - cross-platform! (github.com) 它有 Release 包可以下载 也提供 IDE 的…...