前言
上一章节讲解了vue-router的基本使用,本章节来开始看看如何在路由中设置参数。
那么其中路由传递的参数有两种方式,如下:
- 使用query的方式传递参数,例如:/login?id=1
- 使用params的方式传递参数, 例如:/login/1
使用query的方式传递参数
那么继续使用上一篇的例子,给设置router-link的路径设置参数。
1.设置query方式的参数
image-20200220110143720设置参数的id=10,下面来到浏览器看看,如下:
image-20200220110316262或者直接在console 中输入vm,如下:
image-20200220110526908都可以看到参数的id已经被探测到了。
2.打印query的参数
image-20200220110948842在组件的生命周期函数created中打印this.$route对象,如下:
image-20200220111037664那么如果需要打印出id的数据,只要这样写就可以了this.$route.query.id,下面来试试。
image-20200220111554784浏览器打印参数如下:
image-20200220111624701好了,可以看到已经成功打印出参数了。
3.打印多个query参数
image-20200220111810313浏览器打印query的多个参数,如下:
image-20200220111852207可以从上面看到,已经可以获取多个query的参数了。那么如何在模板中使用呢?
4.在模板中打印query参数
image-20200220112318357浏览器显示如下:
image-20200220112349643可以看到在模板中是可以直接用this.$route来获取参数的,其中在模板还可以省略this,如下:
image-20200220112653732浏览器显示正常,如下:
image-20200220112716616使用params的方式传递参数
1.在路由routes规则处设置params的参数规则
params设置参数的路径示例:/register/:参数
image-20200220113334413上面这里先设置单个参数看看。
2.在注册的router-link设置传递的params参数
image-20200220113506050<router-link to="/register/10">注册</router-link>
可以看到,这里设置传递的参数为10,也就是id=10
3.在调试模式查看传递的params参数
image-20200220113618959那么能不能设置多个参数呢?
4.在路由routes规则处设置多个params参数
image-202002201138299466.在注册的router-link设置传递多个params参数
image-202002201139204257.在调试模式查看传递的多个params参数
image-20200220114007862那么可以看到params已经有多个参数值了。
8.在模板中使用params参数
image-20200220114225464在浏览器显示如下:
image-20200220114259086可以看到已经可以在模板中展示params的参数了。
9.查看路径参数params的正则匹配规则
image-20200220114758457交流QQ群:
点击下面,查看更多Vue系列文章