vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否

}

子组件中: 这样来获取参数

this.$route.params.id

方案三：

---

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({

path: ‘/describe’,

query: {

id: id

}

})

对应路由配置：

{

path: ‘/describe’,

name: ‘Describe’,

component: Describe

}

对应子组件: 这样来获取参数

this.$route.query.id

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是

$router 这很重要~~~

[更多详情]（https://github.com/vuejs/vue-…）

tips

可能上面少了this 会误导新手 直接使用 $route来获取，所以这边加上this

tips 很多人说方案二有问题。 统计下 下面回复的有问题的地方

• 需要在路由配置后面添加对应的参数即 需要添加/:id

• 如果不添加：id数据会在刷新的时候消失。

首先，如果使用方案二 是可以在子路由获取到数据的。

对于页面刷新数据消失，原因是这样的，路由传递数据 那么什么是路由传递数据，是否可以理解，页面跳转的时候携带的数据。如果你已经在子页面了，你点击刷新，这个时候 并没有触发 你在父级页面定义的 this.$router.push()方法。所以为什么会有数据呢。
还有使用params 我的目的就是为了在url后面不会携带参数。所以我为什么要添加:/id 这样的写法呢。
所以 没有对错 只是需求的不同 难道不是么

对于 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。 这句话确实有点武断。 已经修改

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-wqrWbPEd-1710700338271)]

[外链图片转存中…(img-5n44VVz6-1710700338272)]