Angular12应用可正常跳转但浏览器地址栏仅显示localhost:4200无路径是什么原因

核心原因排查 #

你遇到的地址栏不跟随路由跳转更新的问题，通常由以下几个配置错误导致：

• 路由跳转时主动开启了跳过地址更新的配置：所有通过router.navigate、router.navigateByUrl方法跳转，或者模板中routerLink指令跳转时，若添加了skipLocationChange: true参数，就会强制路由跳转时不修改浏览器地址栏。
• 根路径重定向配置缺失匹配规则：你当前的空路径重定向配置{ path: '', redirectTo: 'login'}没有加pathMatch: 'full'属性，默认前缀匹配规则会让所有路由都命中空路径的重定向逻辑，干扰地址栏更新。
• 路由配置逻辑冲突：你现有路由的父级路径同时配置了component和loadChildren，属于不符合规范的写法，会导致子模块路由的路径更新逻辑异常。
• 基础路径配置错误：index.html中的<base href>配置不符合预期，默认需要配置为<base href="/">才能保证路径正常更新。

修复步骤 #

1. 修正根路径重定向配置，补全匹配规则：

// 原错误配置
// { path: '', redirectTo: 'login'},
// 修正后
{ path: '', redirectTo: 'login', pathMatch: 'full'},

2. 检查所有路由跳转代码，删除skipLocationChange: true配置项。
3. 调整父路由配置，拆分component和子模块加载逻辑，示例如下：

{
  path: 'vac',
  component: VacComponent,
  // canActivate: [AuthGuard],
  children: [
    {
      path: '',
      loadChildren: () => import('./modules/vac/vac.module').then(m => m.VacModule)
    }
  ]
}
// 其余vib、cat路径按相同逻辑修改即可

4. 确认项目根目录index.html中存在<base href="/">配置。

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