vue-router query和params 传参和接收参数

1、params 方式传递和接收参数

//传参
this.$router.push({
  name: 'checkDetailInfo',
         params:{
             fkdNum:fkdNum,
             jyayStr:jyayStr,
             defaultStr:defaultStr,
             detailViewBtn:detailViewBtn
             }
   });
 //接收参数
this.toplistInfo = this.$route.params;

页面地址栏内效果

2、query传参

//传参
this.$router.push({
  path: '/checkDetailInfo',
         query:{
             fkdNum:fkdNum,
             jyayStr:jyayStr,
             defaultStr:defaultStr,
             detailViewBtn:detailViewBtn
             }
         });
  //接收参数
  this.$route.query

页面地址栏内效果

小结

#####1、区别：如图可以清楚看出，query相当于get请求，页面跳转时，地址栏有请求的参数。params相当于post请求，参数不会在地址栏显示出来。
#####2、 params传参，push里面只能是 name:‘xxxx’，注意配对使用，否则接收参数为undefined。

3、router 和route区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象，里面可以获取name、path、query、params等