vue路由传参params 与query的区别？

vue路由传参params 与query的区别:

其实是很简单的问题，不过还是踩坑啦。在这里说下

1、 params传参，用name属性对应跳转路径，类似于post提交,参数不会出现在跳转路径里。

<router-link :to="{ name:'cityList' ,params :{cityId:scope.row.id} }">
	<el-button size="mini"  class="button1">{{$t('m.cityList')}}({{scope.row.sum}})</el-button>
</router-link>

子页面接收时：  var cityId = this.$route.params.cityId

2、query传参，用path属性对应跳转路径，类似于get提交，参数是在路径里显示的。

<router-link :to="{ path:'cityList' ,query :{cityId:scope.row.id} }">
	<el-button size="mini"  class="button1">{{$t('m.cityList')}}({{scope.row.sum}})</el-button>
</router-link>

子页面接收时：  var cityId = this.$route.query.cityId

--------------------------------------------------------------------------------------------------------------------------------------------

举例： query传参:   this.$router.push({ path: '/FaultList', query: {sn: sn, carinfoid: carinfoid} })

            params传参:  this.$router.push({ name:'FaultList', params: {sn:sn, carinfoid: carinfoid} })

            query要用path来引入，params要用name来引入，接受的参数都是类似的，分别是：

this.$route.query.sn                 注意：接收参数的时候已经是$route而不是$router啦。

this.$route.params.sn              注意：接收参数的时候已经是$route而不是$router啦。