Angular应用点击返回按钮跳过首页的路由问题排查

问题核心现象 #

点击页面按钮跳转后，点击浏览器返回按钮出现两种异常：

• 直接退出应用回到谷歌搜索页
• 回到当前页面的上上个页面，仿佛刚访问的页面未被存入历史栈

路由配置中的明显问题修复 #

首先看你的accueil子路由配置，存在错误的重定向路径：

// 原错误配置
{ path: '', redirectTo: 'accueil/bots', pathMatch: 'full' },

在子路由中，redirectTo使用相对路径时是基于父路由accueil的，原配置会生成accueil/accueil/bots这种无效路径，导致路由跳转逻辑混乱，进而影响历史栈。需修改为：

// 修正后配置
{ path: '', redirectTo: 'bots', pathMatch: 'full' },

其他排查方向 #

1. 检查跳转代码的导航行为
   确认按钮跳转时是否使用了replaceUrl: true选项：

   // 错误示例：会替换当前历史记录，导致返回跳过该页面
   this.router.navigate(['/bot-project/123'], { replaceUrl: true });
   

   如果存在该配置，移除replaceUrl选项，让跳转正常添加到历史栈中。

2. 排查LoggedInGuard逻辑
   检查守卫中是否存在路由跳转代码，比如验证通过后进行了额外重定向且使用了替换历史记录的行为。确保守卫仅返回布尔值或正确的UrlTree，避免多余的导航操作干扰历史栈。

3. 查看浏览器历史栈
   打开浏览器开发者工具的Application标签，查看History面板，跟踪每次跳转后的历史记录变化：

   • 点击按钮跳转后，确认历史栈是否新增了对应页面记录
   • 点击返回按钮时，确认历史栈是否按预期弹出记录

4. 优化bot-project子路由
   bot-project/:id下的path: 'state', redirectTo: ''可以简化为更清晰的相对路径写法，避免潜在的路由解析问题：

   { path: 'state', redirectTo: './', pathMatch: 'full' },
   

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