如何在Angular中使用provideRouter启用哈希路由？

要启用哈希路由，只需给provideRouter函数传入第二个参数，使用withHashLocation()配置项即可——这是Angular 14+版本里，替代原RouterModule.forRoot({useHash: true})的新实现方式。

修改后的代码示例： #

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withHashLocation } from '@angular/router'; // 新增withHashLocation导入
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { IonicModule } from '@ionic/angular';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(IonicModule.forRoot({})),
    provideRouter(routes, withHashLocation()), // 传入哈希路由配置
  ],
});

关键说明： #

• withHashLocation()会让路由切换为哈希模式，URL格式变为/#/page1、/#/page2，和你之前用useHash: true的效果完全一致。
• 必须从@angular/router中导入withHashLocation，否则会出现未定义错误。

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