路由传参的方式有几种？

最新推荐文章于 2025-06-11 02:06:48 发布

杨杨不秃头

最新推荐文章于 2025-06-11 02:06:48 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_67956222/article/details/123493181

本文介绍了在Vue2和Vue3中进行路由参数传递的两种主要方式：query传参和params传参。query传参会在URL后面拼接参数，而params传参则保持URL干净，但刷新后params参数不会保存。此外，还提到了动态路由传参的使用，并对比了params和query的区别，如params只能与name配合，刷新后不保存，且在地址栏不显示。

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

vue2
第一种：
query传参后面拼接的就是我们传过来的参数
传：this.$router.push（{path：‘/detail’,query:{obj:我们传过来的参数}）
接：this.$route.query.obj
第二
params传参
路径是干净的，不会在路由后面拼接

传：this.$router.push({name:'Detail',params:{obj:我们传的参数}})
接： obj:this.$route.params.obj

vue2
第一种：
 query传参 后面拼接的就是我们传过来的参数
传：this.$router.push（{path：‘/detail’,query:{obj:我们传过来的参数}）
接：this.$route.query.obj
第二
params传参
路径是干净的，不会在路由后面拼接
传：this.$router.push({name:'Detail',params:{obj:我们传的参数}})
接： obj:this.$route.params.obj


vue3

传：import {useRouter} from 'vue-router'
接：import{useRoute} from ‘vue-router’
query传参
传：router.push（{path:'/detail',query:{id:val.id}}）
另一种拼接写法：router.push（` /detail?id=${val.id}`）
接：console.log（route.query.id）
params传参
传：router.push（{name：‘Detail’，params：{id：val.id}}）

接：console.log（route.params.id）
const  route = useRoute(); //useRoute是一个方法，不调用获取不到
第三
动态路由传参：‘/detail/:id’
传：router.push（`/detail/${val.id}`）
接：console.log（route.params.id）
动态路由传参用params接收

传：import {useRouter} from 'vue-router'
接：import{useRoute} from ‘vue-router’
query传参
传：router.push（{path:'/detail',query:{id:val.id}}）
另一种拼接写法：router.push（` /detail?id=${val.id}`）
接：console.log（route.query.id）
params传参
传：router.push（{name：‘Detail’，params：{id：val.id}}）

接：console.log（route.params.id）
const route = useRoute(); //useRoute是一个方法，不调用获取不到
第三
动态路由传参：‘/detail/:id’
传：router.push（`/detail/${val.id}`）
接：console.log（route.params.id）
动态路由传参用params接收

Params和query的区别
(1) query可以使用name和path而params只能使用name
(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存
(3) Params在地址栏中不会显示，query会显示
(4) Params可以和动态路由一起使用，query不可以