如何阻止Angular路由控制浏览器导航栏并保留路由功能？

不需要放弃Angular路由，通过以下两种方案可以实现需求：

方案1：手动结合skipLocationChange与浏览器历史API #

这种方式无需修改路由核心配置，通过导航时的参数控制+手动维护历史记录实现：

1. 导航时跳过URL修改并添加历史条目
   调用router.navigate时添加skipLocationChange: true避免修改浏览器URL，同时手动调用history.pushState将路由状态存入浏览器历史：

   import { Router } from '@angular/router';
   
   constructor(private router: Router) {}
   
   navigateSilently(path: string[]) {
     // 导航但不修改URL
     this.router.navigate(path, { skipLocationChange: true, state: { route: path.join('/') } });
     // 手动添加历史记录，URL保持当前值
     history.pushState({ route: path.join('/') }, '', window.location.href);
   }
   

2. 监听前进后退事件同步路由
   在根组件中监听popstate事件，当用户触发浏览器前进/后退时，从历史状态中取出路由信息并导航：

   import { Router } from '@angular/router';
   import { HostListener } from '@angular/core';
   
   constructor(private router: Router) {}
   
   @HostListener('window:popstate', ['$event'])
   onBrowserBackForward(event: PopStateEvent) {
     if (event.state?.route) {
       this.router.navigate([event.state.route], { skipLocationChange: true });
     }
   }
   

方案2：自定义LocationStrategy #

通过实现自定义的路由定位策略，彻底让Angular路由不修改浏览器URL，同时维护历史记录：

1. 创建自定义策略类
   继承PathLocationStrategy并重写修改URL的方法，只维护浏览器历史状态：

   import { Injectable } from '@angular/core';
   import { PathLocationStrategy, LocationStrategy } from '@angular/common';
   
   @Injectable()
   export class SilentLocationStrategy extends PathLocationStrategy {
     // 重写pushState，不修改URL，仅添加历史状态
     override pushState(state: any, title: string, url: string, queryParams: string): void {
       history.pushState(state, title, window.location.href);
     }
   
     // 重写replaceState，同样不修改URL
     override replaceState(state: any, title: string, url: string, queryParams: string): void {
       history.replaceState(state, title, window.location.href);
     }
   }
   

2. 在模块中配置使用自定义策略
   在你的组件模块（如嵌入组件的独立模块）中替换默认的LocationStrategy：

   import { NgModule } from '@angular/core';
   import { LocationStrategy } from '@angular/common';
   import { SilentLocationStrategy } from './silent-location-strategy';
   
   @NgModule({
     providers: [
       { provide: LocationStrategy, useClass: SilentLocationStrategy }
     ]
   })
   export class EmbeddedComponentModule {}
   

额外说明：解决生产环境URL参数被移除的问题 #

上述两种方案均会让Angular路由不再主动修改URL，因此生产环境中URL参数不会被自动移除，完全保留原始的客户网站URL状态。

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