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啦。