Angular懒加载路由配置后重定向功能失效问题求助

问题根源 #

你的懒加载子路由配置存在两个核心错误：

1. 子路由的路径以斜杠/开头，被解析为根路径下的绝对路径，而非继承父路由dom的前缀；
2. 重定向路径的写法不符合Angular路由的相对/绝对路径规则。

修正后的代码 #

懒加载路由（DomRoutingModule）

const routes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full'},
  { path: 'index', component: IndexComponent },
  { path: ':Id/view', component: ViewComponent },
  { path: 'create', component: CreateComponent },
  { path: ':Id/edit', component: EditComponent } 
];
   

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

关键修正点说明 #

1. 去掉子路由路径的开头斜杠：
   Angular中，RouterModule.forChild()定义的子路由，路径开头不能加/，否则会脱离父路由的dom前缀，直接指向根路径。比如原path: '/index'会被解析为/index，而非/dom/index，这就是你访问/dom时跳转到/index出现404的原因。

2. 使用相对路径重定向：
   子路由空路径的redirectTo: 'index'是相对路径，会自动拼接父路由的dom前缀，最终重定向到/dom/index，完全符合预期。

3. 避免重复父路由前缀：
   子路由的路径不需要包含dom，父路由app-routing.module.ts中的path: 'dom'已经作为前缀自动添加到所有子路由路径上，所以不需要在子路由里重复写dom，否则会出现/dom/dom/index这种错误路径。

验证修正效果 #

• 访问/dom时，会自动重定向到/dom/index，无404错误；
• 所有子路由（如/dom/create、/dom/123/edit）均可正常访问；
• 重定向逻辑符合懒加载路由的嵌套规则。

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