如何在Angular中实现特定路由的URL重定向逻辑？

1. 启用Hash路由模式 #

首先确保应用使用HashLocationStrategy，让路由基于URL中的#部分解析。在app.module.ts的路由配置中开启该模式：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MessageComponent } from './message/message.component';
import { ApplicationManagementComponent } from './application-management/application-management.component';

const routes: Routes = [
  { path: 'message', component: MessageComponent },
  { path: 'application-management', component: ApplicationManagementComponent },
  // 所有未匹配的Hash路由默认跳转到message
  { path: '**', redirectTo: 'message' }
];

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

2. 处理初始URL的路径校验与重定向 #

针对用户手动修改URL路径（非Hash部分）的场景，需要在应用初始化阶段检查当前URL，完成定向逻辑。在app.component.ts的ngOnInit中添加代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit(): void {
    const baseUrl = `${window.location.origin}${window.location.pathname}`;
    const currentHref = window.location.href;
    const currentHash = window.location.hash;

    // 处理手动访问/application-management路径的情况
    if (currentHref === `${baseUrl}/application-management`) {
      window.location.href = `${baseUrl}/#/application-management`;
      return;
    }

    // 其他非预期Hash路由，统一跳转到message页面
    if (currentHash !== '#/message' && !currentHash.includes('#/application-management')) {
      window.location.href = `${baseUrl}/#/message`;
    }
  }
}

关键说明 #

• 用window.location.origin + window.location.pathname动态获取基准URL，避免硬编码适配不同部署环境。
• 通配符路由**保证Hash部分路由未匹配时自动跳转至message；初始化阶段的URL检查则覆盖了用户手动修改路径（非Hash部分）的场景。
• 若偏好Angular路由跳转而非原生window.location，可在路由初始化完成后使用this.router.navigate(['/application-management'])，但初始加载阶段原生跳转更直接可靠。

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