Angular能否混合使用PathLocationStrategy与HashLocationStrategy？

你说得没错，Angular的RouterModule默认确实只能全局统一配置useHash选项，没法直接给不同路由指定不同的策略。不过咱们可以通过一些自定义手段来实现你的需求——让登录页用无哈希的Path模式，其他页面用带哈希的Hash模式。

方案一：自定义混合路由策略 #

我们可以创建一个自定义的路由策略，继承自Angular的LocationStrategy，根据当前路由路径动态切换使用Path还是Hash模式。

步骤1：创建自定义策略类 #

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

@Injectable()
export class HybridLocationStrategy extends LocationStrategy {
  private pathStrategy: PathLocationStrategy;
  private hashStrategy: HashLocationStrategy;

  constructor(platformLocation: PlatformLocation) {
    super();
    this.pathStrategy = new PathLocationStrategy(platformLocation);
    this.hashStrategy = new HashLocationStrategy(platformLocation);
  }

  // 根据当前路径判断使用哪种策略，这里可以根据你的实际路由调整判断规则
  private getCurrentStrategy(): LocationStrategy {
    const currentPath = this.pathStrategy.path();
    // 登录页路由用Path模式，其他路由用Hash模式
    if (currentPath.startsWith('/login')) {
      return this.pathStrategy;
    }
    return this.hashStrategy;
  }

  // 重写LocationStrategy的所有核心方法，委托给当前选中的策略
  override path(includeHash: boolean = false): string {
    return this.getCurrentStrategy().path(includeHash);
  }

  override prepareExternalUrl(internalUrl: string): string {
    return this.getCurrentStrategy().prepareExternalUrl(internalUrl);
  }

  override pushState(state: any, title: string, path: string, queryParams: string): void {
    this.getCurrentStrategy().pushState(state, title, path, queryParams);
  }

  override replaceState(state: any, title: string, path: string, queryParams: string): void {
    this.getCurrentStrategy().replaceState(state, title, path, queryParams);
  }

  override forward(): void {
    this.getCurrentStrategy().forward();
  }

  override back(): void {
    this.getCurrentStrategy().back();
  }
}

步骤2：在根模块中替换默认策略 #

在你的根模块（比如AppModule）里，把Angular默认的LocationStrategy替换成我们自定义的实现：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HybridLocationStrategy } from './hybrid-location-strategy';
import { LAYOUT_ROUTES } from './layout.routes';
import { DEBUG_INFO_ENABLED } from './app.constants';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(LAYOUT_ROUTES, { 
      // 这里不需要设置useHash，自定义策略会处理模式切换
      enableTracing: DEBUG_INFO_ENABLED 
    })
  ],
  declarations: [AppComponent],
  providers: [
    { provide: LocationStrategy, useClass: HybridLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样配置后，用户访问/login时URL是无哈希的纯路径形式；跳转到其他路由（比如/dashboard）时，URL会自动切换成/#/dashboard的哈希模式，完全符合你的需求。

方案二：拆分路由模块（适合大型项目） #

如果你的项目是按功能拆分模块的，可以把登录页单独做成一个独立模块，默认全局用Hash模式，登录模块单独用Path模式。不过这种方式需要注意跳转逻辑，避免冲突。

步骤1：创建登录模块并配置路由 #

// login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'login', component: LoginComponent }
    ])
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

步骤2：根模块全局配置Hash模式，单独处理登录路由 #

在根模块中全局开启哈希模式，然后通过懒加载加载登录模块，跳转登录页时直接用原生URL跳转（避免Angular路由强制加哈希）：

// app.module.ts
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
      // 其他路由配置...
    ], { useHash: true, enableTracing: DEBUG_INFO_ENABLED })
  ],
  // 其他模块、组件配置
})
export class AppModule { }

然后在需要跳转到登录页的地方（比如权限拦截器里），不要用router.navigate，直接用原生URL跳转：

// 示例：拦截器中跳转到登录页
window.location.href = '/login';

这种方式相对简单，但缺点是跳转到登录页时会触发页面刷新，不是Angular的单页面无刷新跳转。

注意事项 #

• 自定义策略方案要确保所有路由跳转都通过Angular的Router进行，避免直接操作window.location导致策略失效。
• 如果你的项目用了服务器端渲染（SSR），需要额外处理服务器端的路由匹配，确保无哈希的登录页能被正确解析。
• 测试时要注意路由跳转的切换逻辑，比如从登录页跳转到其他页面时，URL要正确切换到哈希模式。

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