vue中路由传参的方式及区别

最新推荐文章于 2025-04-13 11:17:08 发布
最新推荐文章于 2025-04-13 11:17:08 发布
阅读量3.3k 收藏 8
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45117345/article/details/93873494
版权
本文详细解析Vue中params和query两种路由传参方式的区别及使用场景。params传参需通过name引入路由，适用于类似POST请求；query传参通过path引入，类似GET请求，参数会拼接在URL后。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参

一.params传参

router文件下index.js里面，是这么定义路由的：

在这里插入图片描述

我想用params来传参，是这么写的，嗯~

在这里插入图片描述

结果可想而知，接收参数的时候：//undefined

这是因为，params只能用name来引入路由，下面是正确的写法：

在这里插入图片描述

这回就对了，可以直接拿到传递过来的参数nameValue了。

二.区别
写法大致相同，在配置的时候params用的是name、query用的是path、
query要用path来引入，params要用name来引入。
注意接收参数的时候，是route而不是router了！
query更加类似于我们ajax中get传参，params则类似于post

query:
在这里插入图片描述

params:
在这里插入图片描述

从上面俩张图片可以看到params的路径中是不显示参数的 反而query是把参数拼接到路由的后面!

希望可以帮到大家！！！

&廾*匸&
关注
Vue中的路由传参解决方案及其区别
RoGroovy的博客
09-17 87
路由传参在Vue中是一项重要的功能，可以用于在不同的页面之间传递数据。URL参数传递的优点是简单直接，参数值可以直接在URL中看到，便于调试和分享。然而，它对于传递较大的数据量不太适用，而且参数值在URL中是明文显示的，可能存在安全风险。路由状态传递的优点是灵活性高，参数值不会暴露在URL中，可以用于传递一些敏感的数据。但是，它需要通过组件之间的通信来传递状态，对于较为复杂的数据传递可能会稍显繁琐。是动态路由参数，可以在URL中传递不同的值。值得注意的是，对于路由参数的接收，可以在组件的。
Vue-路由传参的方法与区别
GTbond的博客
01-11 2516
路由传参 1. 通过路由属性中的name来确定匹配的路由，通过params来传递参数 父组件 this.$router.push传递参数 //html <button @click="toChild"> </button> //方法 toChild(){ this.$router.push({ name:''ChildView", params:{ id : 1, age:20, ··· } }) } 子组件 使用this.rout
Vue Router路由传参
最新发布
前端小菜鸟也有人起的博客
04-13 642
Vue Router路由传参
vue路由传参的方式及区别
nick_zhang的博客
06-11 782
1.params只能由name引入路由,query都可以 2.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示 //路由 { path: '/market/confirmPassword', name: 'confirmPassword', component: confirmPassword, }, this.$router.push({ name: "confirmPassword", params: {
Vue二种路由传参的方式和区别
qq_35184296的博客
04-16 1039
前言： 最近项目需要页面的快捷操作，跳转路由时需要带上参数去另一个页面进行搜索，由于本人是后台，不怎么懂前端，翻阅很多文档后，终于成功了，现整理相关笔记共勉! 代码： 第一种情况:params传参（vue版本<2.2） 快捷操作页面: html: js: 目标页面: 注意事项： 由于params相当于post请求，所以刷新值会消失。 第二种情况:query传参（vue版本<2.2）...
VUE路由传参主要的3种方式
baidu_32809053的博客
05-23 2408
VUE路由传参有3种方式1)query方式(push时使用path来匹配)发起页面:this.$router.push({path: "/accept", //接收页面路由query: {id: 222}});路由配置:routes: [{path: "/accept"}]接受参数页面:export default{data(){return{id:this.$router.query.id; ...
vue中路由传参方式
08-10
在Vue中，路由传参可以使用三种方式：params传参（显示参数）、query传参和布尔模式传参。123 #### 引用[.reference_title] - *1* *2* [【<em>vue】vue路由传参的三种方式]...
Vue-CLI项目中路由传参的方式详解
10-16
总结来说，Vue-CLI项目中路由传参的方法有多种，不同的方法适合不同的场景。标签传参方式适合在模板中直接传参，尤其是在参数较少且简单时；而逻辑传参方式适合在组件逻辑中根据需要进行更复杂的参数处理。理解各种...
vue2路由传参详解
m0_62323931的博客
11-25 1428
在 Vue 项目中，参数传递方式的选择直接影响到用户体验和技术实现。我们需要根据具体场景选择params或query如果参数仅用于组件内部逻辑且不需要在 URL 中显示，建议使用params。如果参数需要在刷新页面后保留，或者允许用户通过 URL 分享当前状态，建议使用query。通过合理规划路由和参数传递方式，可以更好地满足项目的需求，同时提升用户体验和代码维护性。
vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参）
2401_83621004的博客
03-21 526
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
vue 路由多种传参方式的区别
zuo-yiran的博客
06-08 1654
页面间跳转的传参方式主要分为params和query两种： params： 第一种： 在路由管理的页面，通过在path里面事先命名要传的参数： export default new Router({ routes: [ path: "/HelloWorld/:id", name: "HelloWorld", component: HelloWorld }, { path:
vue路由传参方式的几种区别（个人理解）
weixin_41559882的博客
04-14 722
路由配置片段 { path:'gameContent', name:'gameContent', meta:{title:'竞赛详情'}, component: () => import('./views/GameContent') , redirect:'gameContent/details', ...
vue路由传参及区别
Twinkle的博客
09-05 767
1、用法 A、query要用path来引入,接收参数都是this.$route.query.name。 B、params要用name来引入，接收参数都是this.$route.params.name。 2、效果 A、query类似于ajax中get传参，即在浏览器地址栏中显示参数。 B、params则类似于post，即在浏览器地址栏中不显示参数。 query与params的区别 1....
vue 路由传参(params,query)区别
周家大小姐
05-21 406
路由传参有两种方式; 一种为params,一种为query router.js { path: "/information", name: "information", component: () =&gt; import("./views/Information.vue") } 如果打算用params传参就得这么写 一定要name配par...
路由有几种传参方式？他们的区别是？
qisheng188的博客
01-09 775
例如：`/path?路径参数适用于传递少量且固定位置的参数，但不适用于大量参数的情况。4. 使用场景：查询参数适用于传递少量简单的参数，路径参数适用于固定位置的少量参数，参数片段适用于前端路由的状态管理，请求体适用于传递大量数据或复杂数据结构。3. 传递能力：查询参数、路径参数和参数片段都可以传递简单的键值对参数，但对于复杂的参数结构或大量参数的情况，建议使用请求体来传递。1. 可见性：查询参数和路径参数是可见的，可以直接在 URL 中看到，而参数片段和请求体中的参数对用户来说是不可见的。
路由传参的两种区别
baidu_38766543的博客
10-17 2889
vue 路由传参 params 与 query两种方式的区别 用法上的 query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name。 注意接收参数的时候，已经是route而不是route而不是r...
路由传参的区别
qq_52326094的博客
09-22 406
路由传参
Vue：路由传参的三种方式
热门推荐
流楚丶格念的博客
06-26 1万+
【vue】vue路由传参的三种方式vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。params 传参（显示参数）又可分为 声明式 和 编程式 两种方式该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例
vue路由传参的几种基本方式
weixin_43203982的博客
06-11 177
1、动态路由（页面刷新数据不丢失） 路由配置 （示例） { path: '/particulars/:id', name: 'particulars', component: particulars } methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) } }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值