【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 提供了几种不同的方式来实现路由传参,包括 paramsqueryprops

二、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"

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

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

相关文章

EtherNet/IP网络基础

EtherNet/IP&#xff08;Ethernet Industrial Protocol&#xff09;是一种用于工业自动化的通信协议&#xff0c;基于以太网技术。它允许设备和控制系统之间进行高效的数据交换和通信。以下是EtherNet/IP网络的基础知识。 1. 什么是EtherNet/IP&#xff1f; EtherNet/IP是由O…

ctfshow SSTI注入 web369--web372

web369 这把request过滤了&#xff0c;只能自己拼字符了 ""[[__clas,s__]|join] 或者 ""[(__clas,s__)|join] 相当于 ""["__class__"]举个例子&#xff0c;chr(97) 返回的是字符 a&#xff0c;因为 97 是小写字母 a 的 Unicode 编码…

go操作aws s3

v2 官方推荐版本&#xff0c;需要go版本>1.20 安装 go get github.com/aws/aws-sdk-go-v2 go get github.com/aws/aws-sdk-go-v2/config go get github.com/aws/aws-sdk-go-v2/service/s3必要参数 bucket: 存储桶的名称 Region: 存储桶所在区域,例us-east-1 accessKey…

PHP运算符

PHP 运算符是用于执行各种操作&#xff08;如算术运算、比较、逻辑运算、字符串连接等&#xff09;的符号。在 PHP 中&#xff0c;运算符的命名主要是基于它们的功能和用法&#xff0c;而不是像变量或函数那样可以自定义名称。以下是一个关于 PHP 运算符的详细教程&#xff0c;…

unity2D游戏开发01项目搭建

1新建项目 选择2d模板,设置项目名称和存储位置 在Hierarchy面板右击&#xff0c;create Empty 添加组件 在Project视图中右键新建文件夹 将图片资源拖进来&#xff08;图片资源在我的下载里面&#xff09; 点击Player 修改属性&#xff0c;修好如下 点击Sprite Editor 选择第二…

Angular由一个bug说起之八:实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理&#xff0c;数据处理有一些基本的原则包括&#xff1a;准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性&#xff1a;是数据处理的首要目标&#xff0c;‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础&#xff0c;‌因此…

【目标检测】非极大值抑制(Non-Maximum Suppression, NMS)步骤与实现

步骤 置信度排序&#xff1a;首先根据预测框的置信度&#xff08;即预测框包含目标物体的概率&#xff09;对所有预测框进行降序排序。选择最佳预测框&#xff1a;选择置信度最高的预测框作为参考框。计算IoU&#xff1a;计算其他所有预测框与参考框的交并比&#xff08;Inter…

【数据结构】建堆算法复杂度分析及TOP-K问题

【数据结构】建堆算法复杂度分析及TOP-K问题 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;数据结构 文章目录 【数据结构】建堆算法复杂度分析及TOP-K问题前言一.复杂度分析1.1向下建堆复杂度1.2向上建堆复杂度1.3堆排序复杂度 二.TOP-K问…

深度学习1-简介

人工智能&#xff08;AI&#xff09;旨在打造模仿智能行为的系统。它覆盖了众多方法&#xff0c;涵盖了基于逻辑、搜索和概率推理的技术。机器学习是 AI 的一个分支&#xff0c;它通过对观测数据进行数学模型拟合来学习决策制定。这个领域近年来迅猛发展&#xff0c;现在几乎&a…

前端地位蹭蹭蹭Up!!!

作者&#xff1a;溪饱鱼 链接&#xff1a;juejin.cn/post/7283642910301192244 顺便吆喝一句&#xff0c;如果你本科学历&#xff0c;对技术大厂有向往&#xff0c;对前后端测试岗位有兴趣&#xff0c;不对大厂外包有100%的排斥&#xff0c;可以看看这里&#xff0c;薪酬待遇确…

Ruby语言详解

Ruby语言详解 Ruby&#xff0c;作为一种简单快捷的面向对象脚本语言&#xff0c;自20世纪90年代由日本人松本行弘&#xff08;Yukihiro Matsumoto&#xff09;开发以来&#xff0c;便以其独特的魅力和强大的功能赢得了全球开发者的青睐。Ruby不仅继承了Perl、Smalltalk、Eiffe…

​ ​【Linux】-----工具篇(多模式编辑器vim介绍及配置)

目录 认识常用三种模式 基本操作 Ⅰ、进入/打开vim Ⅱ、模式转换 Ⅲ、退出vim 命令集 Ⅰ、命令模式下 移动光标 删除文字 复制 替换 撤销 批量化注释 批量化去注释 Ⅱ、底行模式下 列出行号 跳转至指定行 查找字符 保存文件 退出vim 查看文件 分屏操作 vim的简…

论文阅读:面向自动驾驶场景的多目标点云检测算法

论文地址:面向自动驾驶场景的多目标点云检测算法 概要 点云在自动驾驶系统中的三维目标检测是关键技术之一。目前主流的基于体素的无锚框检测算法通常采用复杂的二阶段修正模块,虽然在算法性能上有所提升,但往往伴随着较大的延迟。单阶段无锚框点云检测算法简化了检测流程,…

CUE-云原生配置语言

CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 BCL 及多种其他语言研发并开源&#xff0c;可以说是 BCL 思路的开源版实现CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 B…

AI OS

一&#xff0c;概念 AI OS, 或AI for OS&#xff0c;也就是近一年来伴随着人工智能的热度而衍生出的一个新的概念 - 人工智能操作系统。 为什么提出AI OS的概念&#xff1f; 这是因为人工智能技术的发展势头太过迅猛&#xff0c;尤其在深度学习、大模型等AI技术的突破后&…

微信小程序:vant-weapp 组件库、css 变量

vant-weapp 组件库 前往 vant-weapp 官网 npm 使用限制&#xff1a;不支持依赖于 Node.js 内置库、浏览器内置对象、C 插件 的包。 安装 vant-weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i…

Mac环境报错 error: symbol(s) not found for architecture x86_64

Mac 环境Qt Creator报错 error: symbol(s) not found for architecture x86_64 错误信息 "symbol(s) not found for architecture x86_64" 通常是在编译或链接过程中出现的问题。这种错误提示通常涉及到符号未找到或者是因为编译器没有找到适当的库文件或函数定义。 …

powe bi界面认识及矩阵表基本操作 - 1

powe bi界面认识及矩阵表操作 1. 界面认识1.1 选择数据源1.2 选择相关表及点击加载1.3 表字段显示位置1.4 表属性按钮位置1.5 界面布局按钮认识 2. 矩阵表基本操作2.1 选择矩阵表2.2 创建矩阵表2.3 设置字体大小2.4 行填充&#xff1a;修改高度2.5 列宽&#xff1a;设置列的宽度…

【下厨记】青椒土豆丝的做法和写代码之间的关系

在gap year 的尾声&#xff0c;我决定给自己报个厨艺培训班&#xff0c;精进一下厨艺。讲道理&#xff0c;在这样一个充斥着代码的社区写怎么做土豆丝是不是很不搭界&#xff0c;但其实没有&#xff0c;且听我娓娓道来。论&#xff0c;青椒土豆丝做法和写代码之间的关系。 1.找…

git怎么把本地仓库提交到远程仓库

要把本地仓库的内容推送到远程仓库&#xff0c;你需要先设置远程仓库的URL&#xff0c;然后使用git push命令。以下是步骤和示例代码&#xff1a; 1、在本地创建一个新的git仓库或者进入一个已存在的git仓库目录。 2、添加远程仓库&#xff08;如果尚未添加&#xff09;。使用…