angular路由跳转及传参多种方式详解

1、指令routerLink跳转:

<a [routerLink]="['/evaluation/rate']" [queryParams]="{id: 123}">
  用户列表
</a>

相对链接路径官方解释:
第一段名称可以用 /、./ 或 …/ 开头。

  • 如果第一个片段用 / 开头,则路由器会从应用的根路由开始查找。
  • 如果第一个片段用 ./ 开头或者没有用斜杠开头,路由器就会从当前激活路由开始查找。
  • 如果第一段以 …/ 开头,则路由器将去往路由树中的上一层。
    设置和处理查询参数和片段

2. router.navigate

写法一:把数组地址拼接成完整 url
写法二:等同写法一,自己拼地址
写法三:自动查找 route 配置里面的 rate路由跳转
skipLocationChange参数介绍:跳转后不改变 url,不想暴露地址的可以加上

/* 首先注入服务 */
constructor(private route: ActivatedRoute, private router: Router) { }

/* 跳转 写法一 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['evaluation', 'rate'], { queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* 跳转 写法二 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['/evaluation/rate'], { queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* 跳转 写法三 跳转的地址为 /evaluation/rate?score=50&level=1 */
this.router.navigate(['rate'], { relativeTo: this.route,  queryParams: { score: 50, level: 1 }, skipLocationChange: true });

/* router配置为: */
const routes: Routes = [
  {
    path: 'evaluation',
    children: [
      {
        path: '',
        component: EvaluationComponent,
      },
      {
        path: 'rate',
        component: RateComponent,
        runGuardsAndResolvers: 'paramsOrQueryParamsChange',
      }
    ]
  },
]


3. router.navigateByUrl

/* 首先注入服务 */
constructor(private router: Router) { }

this.router.navigateByUrl('/evaluation/rate?score=50&level=1');

参数获取:

 ngOnInit() {
  // 获取快照
  this.score = this.route.snapshot.queryParams['score'];

 // 订阅路由参数变化
  this.route.params.subscribe(params => {
    const paramValue = params['score'];
    console.log(paramValue);
  });
 
  // 订阅queryParams变化
  this.route.queryParams.subscribe(queryParams => {
    const paramValue = queryParams['score'];
    console.log(paramValue);
  });
 
  // 订阅fragment变化
  this.route.fragment.subscribe(fragment => {
    console.log(fragment);
  });
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值