能否在Angular路由路径中使用#字符？

答案是不能直接在路由path里写#home。Angular默认会把#后的内容识别为路由片段（即页面内锚点），不会将#本身当作路由路径的一部分。你直接配置path: '#home'的话，Angular根本不会匹配这个规则，访问localhost:4200/#home时，实际匹配的是空路径（''），而非你定义的目标路由。

针对你跨技术栈迁移要保留旧URL的场景，可以通过以下方案实现需求：

1. 自定义Hash路由策略 #

Angular自带的HashLocationStrategy会生成localhost:4200/#/home这种格式的URL，要改成#home（去掉中间的斜杠），需要自定义策略类：

首先创建自定义策略文件：

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

@Injectable()
export class CustomHashLocationStrategy extends HashLocationStrategy {
  override prepareExternalUrl(internalUrl: string): string {
    // 移除默认添加的前置斜杠，把/#/home转为/#home
    return internalUrl.startsWith('/') ? `#${internalUrl.slice(1)}` : `#${internalUrl}`;
  }
}

然后在AppModule里替换原有策略，并启用Hash模式：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy } from '@angular/common';
import { CustomHashLocationStrategy } from './custom-hash-location-strategy';

import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  // 其他路由配置...
];

@NgModule({
  declarations: [HomeComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  providers: [
    { provide: LocationStrategy, useClass: CustomHashLocationStrategy }
  ],
  bootstrap: [HomeComponent]
})
export class AppModule { }

配置完成后，访问localhost:4200/#home就能正确匹配到home路由。

2. 旧URL兼容处理（可选） #

如果迁移前的旧URL存在多种格式，比如部分用户还在访问带斜杠的/#/home，可以在应用初始化时做兼容处理：

在AppComponent的ngOnInit中添加检查逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const currentHash = window.location.hash;
    // 如果是/#/home格式，重定向为/#home
    if (currentHash === '/#/home') {
      window.location.hash = 'home';
    }
  }
}

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