【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. 网络安全管理计划 内容:制造商需要提交一份网络安全管理计划,该计划应包含…...
SIM800L新手避坑指南:从电源不稳到中文短信发送,我的踩坑实录
SIM800L实战避坑手册:从电源设计到中文短信的完整解决方案 第一次拿到SIM800L模块时,我天真地以为这不过是个"高级版蓝牙模块"。直到电源指示灯开始疯狂闪烁、串口不断吐出乱码、中文短信变成问号时,我才意识到自己掉进了技术深坑。…...
RWKV7-1.5B-g1a一文详解:轻量中文对话与文案续写实战
RWKV7-1.5B-g1a一文详解:轻量中文对话与文案续写实战 1. 模型简介 rwkv7-1.5B-g1a 是一款基于RWKV-7架构的多语言文本生成模型,特别适合中文场景下的轻量级应用。这个1.5B参数的模型在保持较小体积的同时,能够出色完成基础问答、文案续写、简…...
CasRel开源镜像部署教程:适配低显存(12GB)GPU的轻量级方案
CasRel开源镜像部署教程:适配低显存(12GB)GPU的轻量级方案 1. 前言:为什么选择这个方案 如果你正在处理文本数据,想要自动提取人物、地点、事件之间的关系,那么关系抽取技术就是你需要的工具。CasRel作为…...
SEO_2024年最新SEO趋势分析与实战策略解读
<h1 id"2024seo">2024年最新SEO趋势分析与实战策略解读</h1> <p>在数字营销的快速发展中,搜索引擎优化(SEO)作为提升网站流量的重要手段,一直备受关注。2024年,SEO领域再度发生了一些重要…...
OpenClaw极简部署:nanobot镜像+手机Termux方案
OpenClaw极简部署:nanobot镜像手机Termux方案 1. 为什么要在手机上部署OpenClaw? 去年夏天,我在咖啡馆等朋友时突发奇想:如果能用手机随时调用AI助手处理文件该多好。当时尝试了几款云端AI工具,但要么功能受限&#…...
小白友好!FunASR语音识别镜像部署教程,开箱即用
小白友好!FunASR语音识别镜像部署教程,开箱即用 1. 快速了解FunASR语音识别 FunASR是由阿里云推出的开源语音识别工具包,它就像是一个能听懂人说话的智能助手。想象一下,你对着手机说话,它能立刻把你说的话变成文字—…...
ARMv8、AArch64 与 arm64:命名与体系结构要点
ARMv8、AArch64 与 arm64:命名与体系结构要点 ARMv8 指 ARM 架构的一个主版本代际;AArch64 是该代际下的 64 位执行状态与 A64 指令集;arm64 与 aarch64 是操作系统与工具链中对 AArch64 的常用三元组/目录名,二进制约定一致。下…...
从零到一实战:基于快马平台快速开发企业级jiyutrainer在线评测系统
今天想和大家分享一个很实用的开发经验——如何快速搭建一个企业级的在线编程评测系统。最近正好有个朋友想做一个类似jiyutrainer的编程练习平台,我就用InsCode(快马)平台试了试,效果出乎意料的好。 项目需求分析 首先明确我们需要实现的核心功能&#…...
从音频生成到DNA分析:手把手带你用S4和Hyena搞定Transformer不擅长的那些长序列任务
从音频生成到DNA分析:手把手带你用S4和Hyena搞定Transformer不擅长的那些长序列任务 当我们需要处理长达数小时的音频波形、百万碱基对的DNA序列或整本小说级别的文本时,传统Transformer架构很快就会遇到计算瓶颈。本文将带您探索两种突破性的序列建模方…...
华为光猫配置解密工具技术架构解析与实现机制
华为光猫配置解密工具技术架构解析与实现机制 【免费下载链接】HuaWei-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/hu/HuaWei-Optical-Network-Terminal-Decoder 在网络设备运维领域,华为光猫配置文件的安全加密机制为设备…...
