其实是很简单的问题,不过还是踩坑了,在这里说下

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之后就没这个问题了。

Logo

前往低代码交流专区

更多推荐