Angular混合Location路由策略下如何实现指定多URL正常访问？

可以实现，无需使用混合Location策略，仅用Angular默认的PathLocationStrategy（HTML5路由模式）结合路由fragment监听即可满足三类URL的映射需求。

注意：生产环境部署时需要配置服务器将所有路由请求重定向到index.html，避免刷新页面出现404错误，这是Angular HTML5路由模式的常规要求。

1. index.html 配置 #

确保head标签内正确配置base href即可：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Angular路由示例</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

2. 业务组件定义 #

// account.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-account',
  template: `
    <div *ngIf="!showResource">
      <h1>Account 页面</h1>
      <router-outlet></router-outlet>
    </div>
    <app-resource *ngIf="showResource"></app-resource>
  `
})
export class AccountComponent implements OnInit {
  showResource = false;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.fragment.subscribe(fragment => {
      this.showResource = fragment === 'resource';
    });
  }
}

// login.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `<h1>Login 页面</h1>`
})
export class LoginComponent {}

// resource.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-resource',
  template: `<h1>Resource 页面</h1>`
})
export class ResourceComponent {}

3. app-routing.module.ts 路由配置 #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccountComponent } from './account.component';
import { LoginComponent } from './login.component';

const routes: Routes = [
  {
    path: 'account',
    component: AccountComponent,
    children: [
      { path: 'login', component: LoginComponent }
    ]
  },
  { path: '', redirectTo: 'account', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. app.module.ts 根模块配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account.component';
import { LoginComponent } from './login.component';
import { ResourceComponent } from './resource.component';

@NgModule({
  declarations: [
    AppComponent,
    AccountComponent,
    LoginComponent,
    ResourceComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

部署到域名根目录后：

• 访问 domain.com/account/ 显示Account组件内容
• 访问 domain.com/account/login 显示Login组件内容
• 访问 domain.com/account#resource 显示Resource组件内容

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