Vue路由传参实战指南:三种常用方法示例演示

简介: Vue路由传参实战指南:三种常用方法示例演示

一、params传参

在路由定义中给每个路由设置一个唯一的名称,然后通过名称来传递参数。例如,定义一个带有命名路由的路由,

在组件中可以通过$router.push或的to属性来传递参数:

// 传递参数
this.$router.push({ 
  name:"admin",    
  params:{id:item.id} //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) 
}) 

// 路由定义
{  
  //组件路径 
  path: '/admin',  
  //组件别名 
  name: 'admin',  
  //组件名 
  component: Admin, 
} 

// 接收参数
this.$route.params.id


注意:获取参数的时候是 $route,跳转和传参的时候是 $router

  • 优点:参数通过路由名称传递,不依赖具体的URL;适合传递动态参数。
  • 缺点:需要提前定义路由名称。
  • 使用场景:传递动态参数,并且不依赖具体的URL。


二、路由属性配置传参:

在路由定义中使用动态路径参数来传递参数。例如,定义一个带有参数的路由:

// 传递参数
this.$router.push({
  name:"/admin/${item.id}", 
}) 

// 路由定义
{   
  //组件路径 
  path: '/admin/:id',   
  //组件别名 
  name: 'admin',   
  //组件名 
  component: Admin, 
}

// 接收参数
this.$route.params.id

注意 this. $router.push 方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应;


  • 优点:参数直接嵌入在URL中,易于理解和传递;适合传递单个参数。
  • 缺点:不适合传递多个参数;参数必须在路由定义中提前声明。
  • 使用场景:传递单个参数,例如用户ID、商品ID等。


三、query传参

在URL中使用查询字符串来传递参数。例如,定义一个带有查询参数的路由:

// 传递参数
this.$router.push({ 
  name:"/admin",     
  query:{id:item.id} 
}) 

// 路由定义
{   
  //组件路径 
  path: '/admin',   
  //组件别名 
  name: 'admin',   
  //组件名 
  component: Admin, 
}

// 接收参数
this.$route.query.id


参数是直接在 url 后面添加的,参数是可见的

  • 优点:参数直接嵌入在URL中,易于理解和传递;适合传递多个参数。
  • 缺点:参数较长时,URL可能会变得冗长。
  • 使用场景:传递多个参数,例如搜索条件、过滤条件等。
目录
相关文章
|
2天前
|
编解码 Java 程序员
写代码还有专业的编程显示器?
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章,分辨率也低,感觉屏幕还是Mac自带的看着舒服
|
4天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1540 5
|
1月前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
7天前
|
人工智能 Rust Java
10月更文挑战赛火热启动,坚持热爱坚持创作!
开发者社区10月更文挑战,寻找热爱技术内容创作的你,欢迎来创作!
583 22
|
4天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法:MVCC(多版本并发控制)和LBCC(基于锁的并发控制)。MVCC通过记录版本信息和使用快照读取机制,实现了高并发下的读写操作,而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理,包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现,并解释了事务ID的分配和管理方式。最后,对比了四种隔离级别的性能特点,帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
201 3
|
10天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】,涵盖本月产品和功能发布、活动,应用实践等内容,帮助您快速了解阿里云百炼产品的最新动态。
阿里云百炼产品月刊【2024年9月】
|
11天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
581 5
|
23天前
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
7天前
|
XML 安全 Java
【Maven】依赖管理,Maven仓库,Maven核心功能
【Maven】依赖管理,Maven仓库,Maven核心功能
235 3
|
9天前
|
存储 人工智能 搜索推荐
数据治理,是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级,可演进扩展的数据架构体系为企业数据治理预留发展空间,推出敏捷版用以解决企业数据量不大但需构建数据的场景问题,基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
327 2