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可能会变得冗长。
  • 使用场景:传递多个参数,例如搜索条件、过滤条件等。
目录
相关文章
|
1天前
|
JavaScript
vue 函数化组件
【10月更文挑战第1天】 Vue.js 的函数化组件通过设置 `functional: true`,使其无状态和无实例,从而减少渲染开销。通过 `render` 函数的 `context` 参数传递数据。示例中,`smart-item` 组件根据 `data.type` 动态选择并渲染 `ImgItem`、`VideoItem` 或 `TextItem` 组件。根实例 `app` 通过按钮切换不同类型的组件数据。函数化组件适用于程序化选择组件和操作传递数据的场景。
|
1天前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
3天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
23 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
4天前
|
JavaScript
vue知识点
10月更文挑战第2天
20 3
|
2天前
|
存储 JavaScript 前端开发
Vue中组件通信方式有哪些?
本文介绍了 Vue 中几种常见的组件间通信方式,包括 Props / $emit、provide / inject、ref / refs、eventBus、Vuex、$parent / $children、$attrs / $listeners 以及通过 vue-router 传参。每种方式都有其适用场景和注意事项,帮助开发者根据具体需求选择合适的通信方式。
10 3
Vue中组件通信方式有哪些?
|
2天前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
14 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
3天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
13 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2天前
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
23 1
|
2天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
17 1
|
2天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
13 1