【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,只能用 name
 name: 'user',
 params: {
    userId: '123' }
});
</script>
(1-2)在目标组件中获取参数

路径:\src\views\UserView.vue

<script setup lang="ts"

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

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

相关文章

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中&#xff0c;可能会创建大量相似对象&#xff0c;例如在文字处理器中每个字符对象。在这些场景下&#xff0c;如果每个对象都独立存在&#xff0c…

「12月·长沙」第四届机器人、自动化与智能控制国际会议(ICRAIC 2024)

随着科技的飞速发展&#xff0c;智能机器人在当今社会的重要性愈发凸显。从制造业的自动化生产线&#xff0c;到医疗领域的手术机器人&#xff0c;再到家庭生活中的智能助手&#xff0c;机器人与人工智能的融合正在改变着我们的生产和生活方式。第四届机器人、自动化与智能控制…

如何通过smtp设置使ONLYOFFICE协作空间服务器可以发送注册邀请邮件

什么是ONLYOFFICE协作空间 ONLYOFFICE协作空间&#xff0c;是Ascensio System SIA公司出品的&#xff0c;基于Web的&#xff0c;开源的&#xff0c;跨平台的&#xff0c;在线文档编辑和协作的解决方案。在线Office包含了最基本的办公三件套&#xff1a;文档编辑器、幻灯片编辑…

鸿蒙 动态共享包HSP的创建和引用

1.什么是动态共享包HSP HSP&#xff08;Harmony Shared Package&#xff09;是动态共享包&#xff0c;可以包含代码、C库、资源和配置文件&#xff0c;通过HSP可以实现代码和资源的共享。HSP不支持独立发布&#xff0c;而是跟随其宿主应用的APP包一起发布&#xff0c;与宿主应…

vue3前端开发-小兔鲜项目-form表单的统一校验

vue3前端开发-小兔鲜项目-form表单的统一校验&#xff01;实际上&#xff0c;为了安全起见&#xff0c;用户输入的表单信息&#xff0c;要满足我们的业务需求&#xff0c;参数类型等种种标准之后&#xff0c;才会允许用户向服务器发送登录请求。为此&#xff0c;有必要进行一次…

MySQL第四次作业

先创建库和表 处理表 1. 修改 student 表中年龄(sage)字段属性&#xff0c;数据类型由 int 改变为 smallint ALTER TABLE student MODIFY sage SMALLINT; 2. 为 Course 表中 Cno 课程号字段设置索引&#xff0c;并查看索引 ALTER TABLE course ADD INDEX index_cno (Cno); …

Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开

背景 在调研浏览器多开的过程中&#xff0c;electron 有自带的 browserview&#xff0c;webview&#xff0c;但是上面两个受制于 electron 内核版本限制&#xff0c;升级不够灵活&#xff0c;对新版的网页支持可能不及时&#xff0c;甚至不兼容&#xff0c;必须通过发布新的客…

【QAC】分布式部署下其他机器如何连接RLM

1、 文档目标 解决分布式部署下其他机器如何连接RLMLicense管理器。 2、 问题场景 分布式部署下QAC要在其他机器上单独运行扫描&#xff0c;必须先连接RLMLicense管理器&#xff0c;如何连接&#xff1f; 3、软硬件环境 1、软件版本&#xff1a;HelixQAC23.04 2、机器环境…

在图神经网络(GNN)上进行关系推理的新架构

开发能够学习推理的模型是一个众所周知的具有挑战性的问题&#xff0c;在这个领域中&#xff0c;使用图神经网络&#xff08;GNNs&#xff09;似乎是一个自然的选择。然而&#xff0c;以往关于使用GNNs进行推理的工作表明&#xff0c;当这些模型面对需要比训练时更长推理链的测…

驰骋低代码如何实现对实体的权限控制?

驰骋低代码平台通过一套精细的权限控制机制&#xff0c;实现了对实体&#xff08;如车辆、学生、员工、固定资产等&#xff09;的查询范围权限和操作权限的全面控制。这种权限控制不仅确保了数据的安全性和准确性&#xff0c;还提高了系统的灵活性和可定制性。以下是驰骋低代码…

移除链表中值为val的元素

203.移除链表元素 力扣题目链接 (opens new window) 题意&#xff1a;删除链表中等于给定值 val 的所有节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&#xff1a;head [], val 1 输出&…

WPF---Prism视图传参

Prism视图传参方式。 实际应用场景 点击tabitem中的列表数据&#xff0c;同步更新到ListStatic Region对应的界面。目前用两种方式实现了传参数据同步。 第一&#xff0c;事件聚合器&#xff08;EventAggregator&#xff09; 1. 定义事件 创建一个事件类&#xff0c;用于传…

go程序在windows服务中优雅开启和关闭

本篇主要是讲述一个go程序&#xff0c;如何在windows服务中优雅开启和关闭&#xff0c;废话不多说&#xff0c;开搞&#xff01;&#xff01;&#xff01;   使用方式&#xff1a;go程序 net服务启动 Ⅰ 开篇不利 Windows go进程编译后&#xff0c;为一个.exe文件,直接执行即…

场站网约车管理的升级让人找车服务更智能

既然是“人找车”&#xff0c;那么如何让人车匹配更快、服务更高效?近日&#xff0c;沧穹科技郑重宣告已助力杭州东站完成P6停车场网约车智能化服务的全面革新升级&#xff0c;一个集高效运营、安全保障与便捷体验于一体的网约车服务典范正式落地。 沧穹科技首创将音频“室内北…

pytest使用

主要技术内容 1.pytest设计 接口测试 框架设想 common—公共的东西封装 1.request请求 2.Session 3.断言 4.Log 5.全局变量 6.shell命令 ❖ config---配置文件及读取 ❖ Log— ❖ payload—请求参数—*.yaml及读取 ❖ testcases—conftest.py; testcase1.py…….可…

Android RSA 加解密

文章目录 一、RSA简介二、RSA 原理介绍三、RSA 秘钥对生成1. 密钥对生成2. 获取公钥3. 获取私钥 四、PublicKey 和PrivateKey 的保存1. 获取公钥十六进制字符串1. 获取私钥十六进制字符串 五、PublicKey 和 PrivateKey 加载1. 加载公钥2. 加载私钥 六、 RSA加解密1. RSA 支持三…

【STM32】IIC学习笔记

学习IIC 前言一、基础知识GPIO_WriteBit 写入高低电平 二、放代码三、逐行细读总结 前言 最近沉迷手写笔记~ 尝试解读江科大的IIC程序&#xff0c;结合笔记更理解IIC 一、基础知识 GPIO_WriteBit 写入高低电平 二、放代码 这个是江科大的软件IIC的设置部分 #include "s…

{Spring Boot 原理篇} Spring Boot自动装配原理

SpringBootApplication 1&#xff0c;Spring Boot 应用启动&#xff0c;SpringBootApplication标注的类就是启动类&#xff0c;它去实现配置类中的Bean的自动装配 SpringBootApplication public class SpringbootRedis01Application {public static void main(String[] args)…

快速入门了解Ajax

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;JavaWeb关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Ajax的初识 意义&#xff1a;AJAX&#xff08;Asynchronous JavaScript and…

计算机实验室排课查询小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;实验室信息管理&#xff0c;实验室预约管理&#xff0c;取消预约管理&#xff0c;实验课程管理&#xff0c;实验报告管理&#xff0c;报修信息管理&#xff0…