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) {
      // 判断是否需要登陆
   }
});