vue路由跳转时传参params和query的区别
其实是很简单的问题,不过还是踩坑了,在这里说下1.params传参,用name属性对应跳转路径,类似于post提交,参数不会出现在跳转路径里。<router-link :to="{ name:'cityList' ,params :{cityId:scope.row.id} }"><el-button size="mini&q
·
其实是很简单的问题,不过还是踩坑了,在这里说下
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之后就没这个问题了。
更多推荐
已为社区贡献1条内容
所有评论(0)