一、通过路由路径传参
通过改变路由路径来进行参数传递，在路由表中定义路由时，在路径后面加上需要传递的参数，然后在组件中通过this.$route.params来获取参数。
代码实现方式如下：
{path: '/example/:id',
name: 'example',
component: Example
}
组件中通过this.$route.params.id来获取参数id，这种方式可以传递多个参数，参数名和参数值会出现在路由路径中，例如：/example/123。
二、query传参
query是一个对象，可以通过在路由地址中加入?和参数名=参数值的方式传参。在组件中可以通过this.$route.query来获取传递的参数。
代码实现如下：
{path: '/example',
name: 'example',
component: Example
}
在调用路由时，例如example?id=123，组件中通过this.$route.query.id来获取参数id。
三、params传参
在调用路由时，可以传递params对象，例如:
this.$router.push({ name: 'example', params: { id: 123 }})在路由表中也需要定义路由参数，并通过props接收参数:
{path: '/example/:id',
name: 'example',
component: Example,
props: true
}
组件中通过props来接收参数:
props: {id: {
type: Number,
required: true
}
}
这种方式可以更好的使用vue的组件化，将路由参数传递给组件的props属性，方便组件的开发和维护。
总结
在vue中传递参数有很多种方式，不同的场景下选用不同的方式可以更好的实现参数传递的目的。通过路由路径传参简单易懂，可以直接通过this.$route.params来获取参数，但是不适合传递多个参数。query传参可以传递多个参数，但是需要在路由地址中加入很多参数，容易产生冗余。params传参适合组件化开发，将参数传递给组件的props属性，方便组件的开发和维护。
