Vue的路由传参大致上有三种方法：
Query参数：
也就是我们最常见的在网址后面加上?key=value的方法。比如说你要去一个页面，你要带上一些信息，就像朋友家里做客带上一瓶饮料。在Vue中，我们可以通过this.$router.push({path: '/home', query: {drink: 'cola'}})的方式来带上这瓶“饮料”。在目标页面中，你就可以通过this.$route.query.drink来获取这瓶饮料（即参数）了，这样你就知道做客的人带来了什么饮料。
Params参数：
这种方式有点像你给快递员一个包裹，然后告诉他：“这是要房间301的”。Params参数就是这个“房间301”。我们可以在定义路由规则的时候，加上一个占位符来接收参数，比如/user/:id，然后可以通过this.$router.push({name: 'User', params: {id: '301'}})这样的方式来传递参数。在目标页面中，通过this.$route.params.id就可以获取到这个参数了。
Meta参数：
这是一个相当于隐藏或者预设的参数，就好像你给朋友留言时在信里面夹着一张小纸条。当我们定义路由的时候，可以为每一个页面预设一些参数。比如{path: '/about', component: About, meta: {login_required: true}}。这样在接下来通过路由守卫等方法，我们就可以根据to.meta.login_required这个参数来判断是否需要登陆。
这就是Vue路由传参的三种主要方式
1. Query参数：
路由调用：
this.$router.push({
path: '/home',
query: {
name: 'John'
}
});在目标组件中获取参数：
let name = this.$route.query.name;
2. Params参数：
路由规则定义：
new VueRouter({
routes: [
{
path: '/user/:id',
name: 'User',
component: User
}
]
});路由调用：
this.$router.push({
name: 'User',
params: {
id: '001'
}
});在目标组件中获取参数：
let id = this.$route.params.id;
3. Meta参数：
路由规则定义：
new VueRouter({
routes: [
{
path: '/about',
component: About,
meta: {
login_required: true
}
}
]
});在路由守卫中获取meta参数：
router.beforeEach((to, from, next) => {
if (to.meta.login_required) {
// 判断是否需要登陆
}
});