Angular路由如何匹配URL哈希以实现旧AngularJS路由重定向？

这个问题我之前也碰到过，Angular的路由默认确实会忽略URL中的哈希（锚点）部分，因为它自身的hash模式就是利用哈希来管理路由的，但要匹配旧AngularJS带哈希的URL完成重定向，还是有可行方案的，我给你两种常用的解决思路：

方案一：使用CanActivate守卫处理重定向 #

这是最灵活也最易维护的方式，通过守卫拦截目标路由，读取URL中的哈希值后再进行针对性重定向。

步骤1：创建重定向守卫 #

先写一个守卫类，用来检测URL哈希并返回重定向路径：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class OldRouteRedirectGuard implements CanActivate {
  constructor(
    private router: Router,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    // 仅在浏览器环境下处理（避免SSR时window对象不存在的问题）
    if (isPlatformBrowser(this.platformId)) {
      // 提取哈希部分，去掉开头的#
      const hashValue = window.location.hash.slice(1);
      const currentPath = route.routeConfig?.path;

      // 匹配旧路由路径+哈希组合
      if (currentPath === 'oldurl') {
        switch (hashValue) {
          case 'tab1':
            return this.router.parseUrl('newurl/page1');
          case 'tab2':
            return this.router.parseUrl('newurl/page2');
          // 默认情况：如果哈希不匹配，可选择重定向到首页或继续原路由
          default:
            return true;
        }
      }
    }
    return true;
  }
}

步骤2：修改路由配置 #

把守卫绑定到旧路由上，不需要在path里写哈希：

// 先创建一个空组件（如果oldurl本身不需要渲染内容）
@Component({ template: '' })
export class EmptyComponent {}

const routes = [
  { 
    path: 'oldurl', 
    canActivate: [OldRouteRedirectGuard],
    component: EmptyComponent // 用空组件占位，避免路由报错
  },
  // 你的其他新路由配置...
  { path: 'newurl/page1', component: NewPage1Component },
  { path: 'newurl/page2', component: NewPage2Component }
];

方案二：自定义UrlMatcher匹配器 #

如果想直接在路由配置里完成匹配，可以自定义路径匹配器，让它能识别URL中的哈希：

步骤1：编写自定义匹配器 #

import { UrlMatcher, UrlSegment } from '@angular/router';

function oldUrlWithHashMatcher(url: UrlSegment[]): any {
  // 检查路径是否为oldurl
  if (url.length === 1 && url[0].path === 'oldurl') {
    const hashValue = window.location.hash.slice(1);
    // 仅匹配指定的哈希值
    if (hashValue === 'tab1' || hashValue === 'tab2') {
      return { consumed: url }; // 返回匹配成功的标识
    }
  }
  return null; // 不匹配时返回null
}

步骤2：配置路由 #

使用matcher替代path，并通过函数式redirectTo根据哈希返回目标路径（Angular 12+支持）：

const routes = [
  { 
    matcher: oldUrlWithHashMatcher,
    redirectTo: () => {
      const hashValue = window.location.hash.slice(1);
      return hashValue === 'tab1' ? 'newurl/page1' : 'newurl/page2';
    },
    pathMatch: 'full'
  },
  // 其他路由...
];

注意事项 #

• 如果你的Angular应用使用hash模式（useHash: true），旧URL的哈希会嵌套在Angular的路由哈希里（比如http://xxx/#/oldurl#tab1），这时候需要调整哈希提取逻辑，比如用window.location.hash.split('#')[1]来获取真正的tab值。
• 若使用SSR（Angular Universal），一定要通过isPlatformBrowser判断环境，避免在服务端访问window对象导致报错。

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