当前位置: 首页 > news >正文

vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例

背景:vue项目 使用this.$router.push进行路由跳转时,可以通过query或params参数传递和接收参数。

通过query参数传递参数:

// 传递参数
this.$router.push({path: '/target',query: {id: 1,name: 'John'}
});
// 接收参数
this.$route.query.id  // 1
this.$route.query.name  // 'John'

通过params参数传递参数(用于动态路由):

// 传递参数
this.$router.push({name: 'target',params: {id: 1,name: 'John'}
});
// 接收参数
this.$route.params.id  // 1
this.$route.params.name  // 'John'

注意事项

query参数通过URL中的查询字符串传递,而params参数通过URL中的路径参数传递。根据你的实际需求和路由配置,选择适合的参数传递方式。
需要注意的是,使用params参数时,要确保目标路由配置中动态路由参数已正确声明。例如:

// 路由配置
{path: '/target/:id',name: 'target',component: TargetComponent
}

相关文章:

  • 第一行代码第三版-第三章变量和函数
  • CSS特效007:绘制3D文字,类似PS效果
  • css中的hover用法示例(可以在vue中制作鼠标悬停显示摸个按钮的效果)
  • 桂院校园导航 静态项目 二次开发教程 1.3
  • 差分详解(附加模板和例题)
  • 桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 1.3
  • docker安装elasticsearch,elasticsearch-head
  • 使用人工智能自动测试 Flutter 应用程序
  • Linux C/C++全栈开发知识图谱(后端/音视频/游戏/嵌入式/高性能网络/存储/基础架构/安全)
  • Jenkins 构建CICD
  • 【Ubuntu】Ubuntu20.04下安装视频播放器vlc和录屏软件ssr
  • 在webstorm中配置sass编译环境
  • jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
  • OpenAI与微软合作,构建 ChatGPT 5 模型;10天准确天气预报
  • 智能AI系统ChatGPT网站源码+支持OpenAI DALL-E3文生图+支持ai绘画(Midjourney)/支持GPT全模型+国内AI全模型
  • [译] 理解数组在 PHP 内部的实现(给PHP开发者的PHP源码-第四部分)
  • Brief introduction of how to 'Call, Apply and Bind'
  • express如何解决request entity too large问题
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • learning koa2.x
  • scala基础语法(二)
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 创建一个Struts2项目maven 方式
  • 分布式任务队列Celery
  • 复杂数据处理
  • 构建二叉树进行数值数组的去重及优化
  • 基于组件的设计工作流与界面抽象
  • 前端存储 - localStorage
  • 日剧·日综资源集合(建议收藏)
  • 我感觉这是史上最牛的防sql注入方法类
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 带你开发类似Pokemon Go的AR游戏
  • #HarmonyOS:软件安装window和mac预览Hello World
  • #Z0458. 树的中心2
  • ${factoryList }后面有空格不影响
  • (Java数据结构)ArrayList
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (vue)页面文件上传获取:action地址
  • (八)光盘的挂载与解挂、挂载CentOS镜像、rpm安装软件详细学习笔记
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (三)docker:Dockerfile构建容器运行jar包
  • (一)基于IDEA的JAVA基础1
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • (转)scrum常见工具列表
  • ***利用Ms05002溢出找“肉鸡
  • *Django中的Ajax 纯js的书写样式1
  • .NET 解决重复提交问题
  • .Net 路由处理厉害了
  • .net经典笔试题
  • .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • .NET序列化 serializable,反序列化
  • /usr/bin/perl:bad interpreter:No such file or directory 的解决办法
  • @cacheable 是否缓存成功_让我们来学习学习SpringCache分布式缓存,为什么用?