我们想要从First.vue页面通过点击跳转到HelloWorld.vue页面并传递参数，通常使用以下两种方式

先看一下路由配置

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/first',
      name:'First',
      component:First
    }
  ]
})

一、使用params传参

First.vue跳转方法代码，注意这里的name参数的值要和路由配置中的name一致

goHelloWorld(){
    this.$router.push({
        name: 'HelloWorld',
        params:{
            id: 2,
            name :'小李'
        }
    });
}

HelloWorld.vue接收参数代码如下

mounted(){
  console.log('id:' + this.$route.params.id);
  console.log('name:' + this.$route.params.name);
}

进入页面浏览会打印参数的值，如下图

这种方式需要注意以下两点
1、跳转后浏览器URL中不会显示参数，如上图所示
2、再次刷新页面参数无法再次获取，刷新浏览器打印参数如下图，值为undefined

二、使用query传参

这种方式和params不同的地方在于，跳转后URL中会显示参数信息，且再次刷新页面，还是能获取参数

First.vue中的跳转方法代码如下

goHelloWorld2(){
    this.$router.push({
        name:'HelloWorld',
        query:{
            name:'张三',
            age:24
        }
    });
}

HelloWorld.vue中接收参数代码如下

mounted(){
  console.log('name:'+ this.$route.query.name);
  console.log('age:' + this.$route.query.age);
}

打印结果如下图