vue使用router-link :to=“{path:‘/index‘}“传参以及参数的使用
从A页面跳转到B页面,要带A页面的列表行中的行id在A页面跳转时带参数:<router-link :to="{path:'/franchiser/stores/salesclerk', query:{shopId:props.row.id}}&am
vue使用router-link传参有两种方式:一种是拼接在url后面传参,另一种是放在url中间传参
第一种:拼接在url后面传参
从A页面跳转到B页面,要带A页面的列表行中的行id
在A页面跳转时带参数:
<router-link :to="{path: '/franchiser/stores/salesclerk', query:{aId:id}}" exact title="店员管理">
待跳转页面
</router-link>
如果aId=10,那这里的跳转链接就是:/franchiser/stores/salesclerk/list?aId=10
在B页面获取参数:
先在date里面定义一下参数来接收:
data() {
return {
filters: {
id:'' //这里名字根据实际情况定义
}
}
filters在我目前的项目里会在调用接口的时候一块传给接口,这里的目的主要就是要有一个能传值给接口的list接收,方便把id传过去。然后以下代码获取到传过来的id
this.filters.id=this.$route.query.aId //这里this.$query后面的参数名必须与上个页面传来的参数名保持一致
第二种:将参数放在url中间传参
在主页面要跳转到子页面的地方,path后面像如下格式写入参数,这里的参数没有参数名。
(我这里的路径是需要配置router权限的,不然在url中间带参数会报404,这里的router权限配置要看自己实际的项目里是如何配的,有的是项目后台配,有的是前端在router里面配,看实际情况。)
<router-link :to="{path: '/supply/information/' +aId + '/edit' }" exact title="编辑">
编辑
</router-link>
如果aId=12,那么现在的path就是 /supply/information/12/edit
在子页面,我们只需要通过this.$route.params.id
获取这个参数就可以使用了。
注意:这里都是this.$route.params.id
,不是this.$route.params.aId。
更多推荐
所有评论(0)