Angular 2+中如何隐藏URL路由，始终显示根应用路径？

当然可以实现！在Angular 2+里要让URL始终停留在根路径（比如www.foo.com），不展示/login这类具体路由，我常用两种实用方案，给你详细拆解：

方案一：导航时使用skipLocationChange选项 #

这是最直接的方式，每次导航时告诉Angular“不要更新地址栏的URL”。你可以在手动导航或模板路由链接中配置：

1. 组件内手动导航时 #

在调用router.navigate()时添加skipLocationChange: true参数：

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

constructor(private router: Router) {}

navigateToLogin() {
  // 导航到/login路由，但地址栏保持根路径
  this.router.navigate(['/login'], { skipLocationChange: true });
}

2. 模板中的路由链接 #

在routerLink标签上绑定skipLocationChange属性：

<!-- 点击后导航到/login，地址栏不变化 -->
<a routerLink="/login" [skipLocationChange]="true">前往登录页</a>

注意：这个方案需要确保所有导航操作都加上该配置（包括路由守卫里的跳转），如果应用导航场景较多，可能会有点繁琐，这时候可以考虑下面的全局方案。

方案二：自定义LocationStrategy（全局生效） #

Angular的路由系统依赖LocationStrategy来管理URL，我们可以自定义这个策略，让它强制所有路由变化都保持URL为根路径，一步到位解决问题：

1. 创建自定义策略类 #

新建一个root-location-strategy.ts文件，继承默认的PathLocationStrategy并重写URL相关方法：

import { LocationStrategy, PathLocationStrategy, PlatformLocation } from '@angular/common';

export class RootLocationStrategy extends PathLocationStrategy {
  constructor(platformLocation: PlatformLocation) {
    super(platformLocation);
  }

  // 重写replaceState，阻止替换URL为路由路径，始终用根路径
  override replaceState(state: any, title: string, url: string, queryParams: string): void {
    super.replaceState(state, title, '/', queryParams);
  }

  // 重写pushState，添加历史记录时也保持URL为根路径
  override pushState(state: any, title: string, url: string, queryParams: string): void {
    super.pushState(state, title, '/', queryParams);
  }
}

2. 在AppModule中替换默认策略 #

在根模块的providers数组中，用自定义策略替换默认的LocationStrategy：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy } from '@angular/common';
import { RootLocationStrategy } from './root-location-strategy';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    // 用自定义策略替换默认的LocationStrategy
    { provide: LocationStrategy, useClass: RootLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

注意事项：

• 这个方案是全局生效的，所有路由变化都会自动保持URL为根路径，无需逐个导航配置。
• 浏览器的前进/后退按钮依然能正常切换路由状态，因为历史记录的state中依然保存了路由信息，只是地址栏不显示而已。
• 如果你的应用需要SEO优化，这种隐藏URL的方式可能会影响搜索引擎抓取不同路由的内容，需要根据业务需求权衡。

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