Angular浏览器返回按钮异常：点击直接跳转至应用初始URL

问题核心是全局导航函数中默认启用了replaceUrl: true。这个参数的作用是让Angular用新路由的历史记录替换当前栈顶的历史条目，而非在浏览器历史栈中新增条目。

举个实际场景的例子：

1. 从localhost:3000进入/home时，replaceUrl: true会把初始页的历史记录替换成/home；
2. 再进入/settings时，又把/home的记录替换成/settings；
   最终浏览器历史栈里只有localhost:3000和/settings两条记录，点击返回按钮自然会直接跳回初始URL。

解决方案 #

1. 修改全局导航函数，移除默认的replaceUrl: true #

将全局导航函数中的replaceUrl: true配置删除，让Angular默认执行添加历史记录的行为：

async go(path: string[], options: NavigationExtras = {}, showLoader: boolean = true) {
    if(showLoader === true) {
      await this.loader.start();
    }
    // 移除replaceUrl: true，恢复默认的历史栈新增行为
    this.router.navigate(path, { ...options});
}

2. 保留特定场景的replaceUrl需求（可选） #

如果有部分场景确实需要替换历史记录（比如登录成功后跳转首页，不希望用户返回登录页），不要全局默认开启，而是在调用导航函数时单独传入参数：

// 仅在需要替换历史的场景中传入replaceUrl
this.navigationService.go(['/home'], { replaceUrl: true });

额外检查点 #

• 你的路由配置中onSameUrlNavigation: "reload"不会影响历史栈逻辑，无需修改；
• 由于使用了Ionic的IonicRouteStrategy，默认配置下它会正常维护路由历史栈，无需额外调整。

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