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可能会变得冗长。
  • 使用场景:传递多个参数,例如搜索条件、过滤条件等。
目录
相关文章
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
675 2
|
7月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
577 137
|
7月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
595 0
|
10月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
682 1
|
10月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
490 0
|
JavaScript Go
|
JavaScript C语言 Go
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1109 0
|
11月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
12月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1568 78