46. Vue路由传参的基本使用

前言

上一章节讲解了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-20200220113829946

6.在注册的router-link设置传递多个params参数

image-20200220113920425

7.在调试模式查看传递的多个params参数

image-20200220114007862

那么可以看到params已经有多个参数值了。

8.在模板中使用params参数

image-20200220114225464

在浏览器显示如下：

image-20200220114259086

可以看到已经可以在模板中展示params的参数了。

9.查看路径参数params的正则匹配规则

image-20200220114758457