为什么Angular中OrdersComponent仅被创建两次？路由与Location跳转差异

问题核心原因说明 #

1. 为什么使用location.replaceState之后重复跳转不会重建组件

Angular Router 内部独立维护了一套路由状态树，仅当你调用 Router 提供的导航API时，才会触发路由匹配、状态更新、组件生命周期的变更。
而 Location.replaceState 是底层API，仅会修改浏览器地址栏的URL、替换当前浏览器历史栈记录，完全不会通知Angular Router更新内部的路由状态。
对应你的复现流程：

• 执行完步骤2跳转/orders/12345之后，Router内部记录的当前激活路由是带参数的/orders/:orderNumber配置项
• 调用location.replaceState('/orders')仅修改了地址栏显示，Router内部仍认为当前处于/orders/:orderNumber路由状态
• 后续执行router.navigateByUrl('/orders/98765')时，Router会对比内部保存的当前路由和目标路由，二者属于同一个路由配置项，仅参数发生了变化。Angular Router默认对于同配置路由的参数变更，不会销毁重建组件，因此不会触发构造函数执行。

2. 替换为router.navigateByUrl('/orders')后每次都重建组件的原因

Router.navigateByUrl是标准的路由导航API，会完整触发路由检测、状态更新全流程：

• 当你从/orders/xxx调用navigateByUrl('/orders')时，Router会识别到目标路由是path: ''、pathMatch: full的另一个独立子路由配置，和当前激活的/orders/:orderNumber属于不同的路由配置项
• 此时Router会销毁前一个OrdersComponent实例，匹配到无参数的路由配置后重新创建新的OrdersComponent实例，因此会触发构造函数打印日志
• 后续再跳转/orders/xxx时，又会匹配到带参数的路由配置，再次触发销毁重建，因此每次重复操作都会执行构造函数。

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