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

个人觉得这种方式比query方便很多，能避免一些问题，不过也根据实际情况而定（比如子页面刷新后还要用到传过来的参数，用query传参就好一点）

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传参。A通过路由带参跳转到B页面，然后通过参数过滤掉B页面的一些数据。之后刷新B页面，由于参数是在路径里的，还是过滤掉的数据，这个时候要么在B页面入口进入B页面，要么就得在页面再做处理才能符合需求，改用params之后就没这个问题了。