接下来，我们来讲下路由比较重要的内容，就是传参。
我们的路由上面是可以定义一些参数的，比如说：
那么我们加这个东西有什么用处呢？
我们在使用了 vue-router 之后，我们都会在我们的组件内部拿到一个叫做 this.$route 这么一个对象。
这个对象会包含我们当前这个路由匹配到之后的所有信息，如下图：
也就是说，我们在路由的 index.js 里面，定义了 /hello/:id 这个路径上面，有个 :id，那么这个 id 就变成了变量名。
然后我们传进来的，跟 :id 匹配的这段路径的内容，它就会变成我们的值，就是123。
那么这个东西有什么用呢？
我们在定义一个路径的时候，比如说，我们有一个列表请求，需要请求一大堆的商品信息，会有很多列表。
然后我们要去查看这个商品信息的时候，可以直接通过在我们的路径上面跟上商品名的 id，然后我们就可以跳转到商品详情的页面。
然后根据这个 id，我们再去请求这一个商品的详情信息，就可以把它的内容给显示出来。
这样的话，你这个商品详情的页面是完全就可以复用的。只是根据传进来不同的 id，去指定你要去显示的哪个商品信息。
就类似于我们 props 的用法是一样的。所以它就是一个控制你跳转到这个页面之后，要显示的，固定的内容的一个方式。
那么跟这个差不多的，我们还有一个叫做 query 的东西。
我们在写一个路径的时候，后面跟上问号加一系列的东西，比如：localhost:8080/hello?a=123&b=456。
那么从问号开始，到后面结束的这段东西，就叫做 query。也就是 a=123&b=456。
它翻译出来之后，就是我们的 { a: 123，b: 456 } 这么一个键值对的一个对象。如下图：
其实，我们完全可以理解为，我们现在做前端路由和以前做后端路由，使用的方式是一样的。
我们通过 url 进行一些传参，来告诉我们这个页面实际上要显示的是哪些内容。
那么这个参数就变的非常灵活，因为它在 url 上面，你完全可以在每次跳转的时候，都去做一个定制。
query 我们不需要在定义路由的时候就给它指定，我们可以直接在页面上面，去通过 this.$route 这个对象来获取。
所以我们用起来非常的方便，这也是我们为什么要结合 vue-router 去使用的一个原因。
因为 vue-router 它不仅仅是给你实现了一个页面跳转的功能，它还帮你处理好了非常多的，跟业务逻辑有关的东西，你用起来会非常的方便。
然后我们还有一个更好更简单的方法去传递这个 params，我们可以在声明路由的地方，去写一个参数 props: true。
定义为 true 之后，它就会把 :id 作为 props 传递到当前路由配置的组件里面去，如下图：
通过这种方式，我们就可以实现，在组件里面不需要去写 this.$route 这种写法。
因为使用了 this.$route，就相当于是跟我们 vue-router 代码进行了一个耦合。
可能会导致以后，我们的用法就会不一样，比如 vue-router 进行一些升级或者其他原因。
而且我们这个 Hello 组件，如果我们里面是写了 $route 这个方法，它就不能作为一个单纯的组件去拿到别的地方使用。
而是一定要作为我们 router 配置里面的这个 component 去用，因为在代码里面直接去声明了它要去调用 this.$route。
如果你作为组件去用，那么它就会不匹配。因为我们无法在使用这个组件的时候，把这个 id 给它传过去。
那么如果我们声明了 props 进行了这个操作，我们就可以在另外的地方也可以使用这个组件。
因为它依赖的这个 id 值，我们可以通过 props 给它传进去，它不需要直接去路由上面读取，那么这就是一个解耦的过程。
如果以后大家要通过 params 去做，我比较推荐的是通过声明 props 这种方式去做。
props 有很多的用法，如果设置 props: true 的情况下，就会通过 params 里面定义的名称去转换 props，当然你还可以指定你自己要传的 props：
那么如果 props 要根据 query 进行传递呢？那么你可以声明的是一个方法，这个方法返回的是一个对象，如下图：
我们可以看到，这个方法就变的非常的灵活。
大家不要太拘泥于以前的那种 this.$route 这种写法，尽量的让你的组件跟路由解耦。尽量不要在组件里面去使用 this.$route 或者 this.$router 方法。
把这些东西解耦了之后，你会发现有很多的好处，就是你组件的复用性会变的更高。
this.$route 其实在哪个组件里面都是一样的，因为 $route 是对应我们当前路由里面所包含的一些信息。
也就是说你所有页面都是在同一个路由下面显示的，那么这个路由它都是一样的。
意思就是：在同一个路由下面，你显示的所有页面，拿到的 this.$route 都是一样的。
