前言
上一章节讲解了Vue-router的基本使用，本章节来开始看看如何在路由中设置参数。
那么其中路由传递的参数有两种方式，如下：
-
使用query的方式传递参数，例如： /login?id=1 -
使用params的方式传递参数, 例如： /login/1
使用query的方式传递参数
那么继续使用上一篇的例子，给设置router-link的路径设置参数。
1.设置query方式的参数
设置参数的id=10，下面来到浏览器看看，如下：
或者直接在console 中输入vm，如下：
都可以看到参数的id已经被探测到了。
2.打印query的参数
在组件的生命周期函数created中打印this.$route对象，如下：
那么如果需要打印出id的数据，只要这样写就可以了this.$route.query.id，下面来试试。
浏览器打印参数如下：
好了，可以看到已经成功打印出参数了。
3.打印多个query参数
浏览器打印query的多个参数，如下：
可以从上面看到，已经可以获取多个query的参数了。那么如何在模板中使用呢？
4.在模板中打印query参数
浏览器显示如下：
可以看到在模板中是可以直接用this.$route来获取参数的，其中在模板还可以省略this,如下：
浏览器显示正常，如下：
使用params的方式传递参数
1.在路由routes规则处设置params的参数规则
params设置参数的路径示例：/register/:参数
上面这里先设置单个参数看看。
2.在注册的router-link设置传递的params参数
<router-link to="/register/10">注册</router-link>
可以看到，这里设置传递的参数为10，也就是id=10
3.在调试模式查看传递的params参数
那么能不能设置多个参数呢？
4.在路由routes规则处设置多个params参数
6.在注册的router-link设置传递多个params参数
7.在调试模式查看传递的多个params参数
那么可以看到params已经有多个参数值了。
8.在模板中使用params参数
在浏览器显示如下：
可以看到已经可以在模板中展示params的参数了。
9.查看路径参数params的正则匹配规则
交流QQ群：
点击下面，查看更多Vue系列文章
原文始发于微信公众号（海洋的渔夫）：46. Vue路由传参的基本使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/32601.html
![[开源CMS]前端无关，内容为王：Strapi 助力您跨越前端界限，引领无头 CMS 革命](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading-480x300.gif)