关于路由传参与接收参数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chongchong1325/article/details/88717552

路由 跳转传参的方式有很多，下面我总结一下常用的传参方式及其相对应的接收参数方式。

第一，参数是以;分隔

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