路由 跳转传参的方式有很多,下面我总结一下常用的传参方式及其相对应的接收参数方式。
第一,参数是以;分隔
http://localhost:8092/account/manage/issue;id=161123434754052096
路由跳转方式:
1,routerLink的方式
<a [routerLink]="['/coupon-manage/issueCoupon',{id:data.id}]"></a>
2.navigate的方式
this.router.navigate([`/coupon-manage/issueCoupon/issued`,{ id: id,name:name }])
对于分号分隔的参数有如下对应的参数接收方式:
const idList = this.activatedRoute.params['value'];
当然在使用之前要引入路由相关参数:
import { Router,ActivatedRoute } from '@angular/router';
第二,参数是以?分隔
1.routerLink的方式
若是只是传个别的值
<a [routerLink]="['/coupon-manage/issueCoupon']" [queryParams]="{'custId':list.custId,'userName':list.userName}"></a>
例如在table当中,若是要传整行数据的值(data)
<a [routerLink]="['/coupon-manage/issueCoupon']" [queryParams]="data"></a>
2.navigate的方式
this.router.navigate([`/coupon-manage/issueCoupon/issued`],{queryParams:{id:custId})
对应的参数接收方式如下:
this.activatedRoute.params.subscribe(param => {console.log(param)})
第三种参数是类似这种的
http://localhost:8094/admin/product/product-manage/package/2019041510213862676
1.routerLink的方式
<a [routerLink]="['/coupon-manage/issueCoupon',id]" ></a>
当然,在路由中是要有配置的
{
path:
'listDetail/:id'
,
component:ListDetailComponent
}
2.navigate方式
this.router.navigate([`/product-manage/type/${id}`]);
接收参数的方式:
this.activatedRoute.snapshot.params["id"]
以上是总结的路由传参方式及其参数在url中的展现形式。
当然了,如果需要的时候 ,以上传参方式也是可以组合使用的。
示例如下:
jumpToPage(id, type) {
this.router.navigate([`/product-manage/type/${id}`, { type: type,index:2 }]);
}
有不错的链接,大家可以参考下:
https://blog.csdn.net/private_xiaolei/article/details/83042647