Angular默认路由总是被预加载，直接访问/about时路由跳转异常

问题原因 #

• 核心诱因是空路径（path: ''）路由未配置pathMatch: 'full'参数。Angular路由默认采用前缀匹配规则，path: ''可以匹配所有路径的前缀（任意URL的开头都包含空字符串），因此访问/about时，路由系统会先命中空路径的路由规则，触发home模块加载，之后才会继续向下匹配到/about对应的路由规则。
• 你观察到的URL短暂跳转、NavigationStart事件没有打印/的现象，是因为该匹配过程发生在同一次导航的路由解析阶段，没有触发新的导航，因此不会产生新的NavigationStart事件，只会在页面渲染前出现短暂的URL闪变。

解决方案 #

修改app-routing.module.ts中的空路径路由配置，添加pathMatch: 'full'参数即可：

const routes: Routes = [
  // 仅当URL完全为空时才命中该路由
  { path: '', pathMatch: 'full', loadChildren: () => import('./routes/home/home.module').then(m => m.RoutesHomeModule) },
  { path: 'about', loadChildren: () => import('./routes/about/about.module').then(m => m.RoutesAboutModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

修改后只有用户访问根路径时才会加载home模块，直接访问/about不会再触发home模块加载，也不会出现URL闪变问题。

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