Angular 17路由异常：带日期参数URL粘贴后跳转至/home

1. 开启路由调试日志，定位重定向来源 #

在根路由配置中添加enableTracing: true，控制台会输出路由导航的每一步细节，能明确看到是哪条规则触发了重定向：

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  enableTracing: true
})

2. 检查路由的strictSlash配置 #

Angular 17可能调整了strictSlash的默认值，导致尾斜杠匹配逻辑变化。显式设置strictSlash: false，让/home和/home/视为等价路径：

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  strictSlash: false
})

3. 简化Home模块路由配置，避免匹配歧义 #

将当前Home路由改为子路由结构，减少冗余的redirect规则，消除路由匹配冲突：

const routes: Routes = [
  {
    path: 'home',
    children: [
      { path: '', redirectTo: './', pathMatch: 'full' }, // 处理 /home 重定向到 /home/
      { path: ':date', component: HomeScreenComponent }
    ]
  }
];

4. 排查路由守卫与Resolver逻辑 #

• 检查根路由的CustomizingResolver，确认其内部没有在直接访问场景下强制重定向到/home/（比如初始化未完成、错误处理时的跳转）。
• 检查Home模块或全局的CanActivate/CanLoad守卫，确认它们不会拦截带参数的路由请求并触发重定向。

5. 验证参数匹配与组件触发逻辑 #

在HomeScreenComponent中添加参数日志，确认路由是否真正匹配到该组件：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const date = params.get('date');
    console.log('Date parameter received:', date);
  });
}

如果直接访问时控制台无此日志输出，说明路由未匹配到组件，回到第一步通过调试日志定位具体原因。

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