Angular路由基于现有可选参数新增参数的router.navigate正确语法

前置准备 #

首先需要在你的组件/服务中注入ActivatedRoute和Router：

import { ActivatedRoute, Router } from '@angular/router';

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

正确的追加写法 #

要在当前路由的矩阵参数基础上追加新参数，直接使用如下写法即可：

// 直接追加p2=v2参数，不会覆盖已有的p1=v1
this.router.navigate([{ p2: v2 }], {
  relativeTo: this.route
});

原理解释 #

• navigate方法的第一个参数为路由命令数组，当数组内只有参数对象没有路径段时，Angular会将参数合并到当前激活路由的最后一个路径段的矩阵参数中
• relativeTo: this.route指定基于当前路由做相对跳转，不会重置整个路由路径
• 执行后地址栏路径会自动更新为/route1;p1=v1;p2=v2，完全符合需求
• 如果你的路由同时带全局查询参数（?后面的参数）需要保留，可以在配置里加queryParamsHandling: 'merge'

补充说明 #

你之前写的router.navigate(["route1"], { p1: v1 })是错误写法，正确的带矩阵参数的路由跳转写法应该是将参数对象放在路径段之后的命令数组中：

// 正确写法，跳转后路径为/route1;p1=v1
router.navigate(["route1", { p1: v1 }]);

内容的提问来源于stack exchange，提问作者Mario