Angular无匹配路由时地址栏为何自动回退至根URL？

当你创建的Angular应用路由配置为空数组（routes: Routes = []）时，访问/xyz这类未定义路径后地址栏回退到根URL，核心原因是Angular Router的默认导航行为：

1. 首先，SPA应用的服务器配置（不管是Angular开发服务器还是Firebase托管）会在路径不存在时返回index.html，确保你的应用能正常启动。
2. 应用启动后，Angular Router会执行初始导航，尝试匹配当前URL（/xyz）的路由配置。
3. 由于路由数组为空，没有任何可匹配的路由条目，Router无法完成有效导航。为了保证应用能正常渲染（避免因导航失败导致的空白或异常），Router会自动触发重定向，将地址栏导航到根路径/。

要改变这个行为，你只需要添加一个通配路由来匹配所有未定义的路径：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 若有自定义404组件，可引入后绑定到路由
// import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  // 匹配所有未定义路径，保持URL不变
  { path: '**', pathMatch: 'full' }
  // 或者绑定到404组件
  // { path: '**', component: NotFoundComponent }
];

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

添加该配置后，访问/xyz时，Router会匹配通配路由，地址栏将保持在/xyz，不会再自动回退到根路径。

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