vue的路由传参的3种方式

$router.push()

push()有两种方式：一种是通过path，一种是通过name。然后无论是path还是name都有params和query方式进行传递，如下：
type = “居住类”
this.$ router.push({path: /message/${type}})

this.$router.push({path:"/message",query:{ type: “居住类”}})

this.$router.push({name:“message”,params:{ type: “居住类”}})

this.$router.push({name:“message”,query:{ type: “居住类”}})

到这里有人就有疑惑了，path方式明明没有通过params进行传参啊，没错，看起来没有啊，但只是看起来而已，请看下两张图：

看到了吗？其实它本质上是经过params传递的。

更没想到的是，其实在传递参数的时候，可以同时params方式和query方式进行传递参数。

其实这没什么好惊讶的，路由对象中都有query，params对象，当然可以两种方式一起了。
最后，注意一下，params方式时需要在路由定义的path中要表明你要传递的参数。query方式不用，想传什么就传什么，才不管他呢！

<router-link>

<router-link>其实没什么好讲的，<router-link>的to属性的值就是push里面的第一个参数，一模一样的。为什么呢？其实是<router-link>的内部就是通过router.push()进行路由访问的。

路由组件传参

其实就是在路由定义的时候，进行了如下操作。
单个组件时：

多个组件时：

当然还要在对应的组件中进行如下操作：

如果 props 被设置为 true，route.params 将会被设置为组件属性。这样你就可以在那个路由，通过如this.id的方式获得参数，但这种方式只适用于params方式传参的时候，用这种方式获得params对象的参数，query的不行。
那么这种方式有什么好处呢？
使用 props 将组件和路由解耦。vue文档是这么说的，我也不明白，有人知道的话，告诉我啊。