Angular调用location.back()返回时跳出应用的问题排查

调用_location.back()跳出Angular应用，核心是以下几个问题导致的：

• 从scheduler页面跳转到cr页面时，你大概率用了原生JS跳转方式（比如直接给window.location.href赋值、用window.open打开cr页），没有走Angular Router提供的SPA路由跳转逻辑。这种跳转方式会触发整页刷新，重新加载Angular应用，破坏原有历史栈，回退时就会跳出当前应用。
• 你贴出的路由配置存在多处语法错误，会导致路由加载、匹配逻辑异常：
  • scheduler路由模块中，import的组件是SchedulerHomeComponent，但路由规则里写的组件是SchedulerComponent，名称不匹配会导致scheduler页加载失败
  • cr模块的路由文件中，@NgModule装饰的类名错误写成了CrModule，和主路由懒加载引入的业务模块类名重名，会导致模块加载逻辑混乱
  • 主路由文件app-routing.module.ts的APP_ROUTES数组缺少闭合括号，属于语法错误
• 没有做回退兜底：如果用户是直接在地址栏输入cr页地址打开的页面，历史栈里没有应用内的上一级记录，直接调用back()就会跳出应用。
• 额外需要检查：确认你注入的Location服务是从@angular/common引入的，不要错误引入其他第三方库的同名对象，也不要直接调用window.location.back()。

1. 先修正所有路由配置错误

   • 修正scheduler路由模块的组件引用，和import的组件名保持一致：

   // scheduler-routing.module.ts
   const SCHEDULER_ROUTES: Routes = [
     {
       path: '',
       component: SchedulerHomeComponent // 替换为和import一致的组件名
     }
   ];
   

   • 修正cr路由模块的类名，不要和业务模块重名：

   // cr-routing.module.ts
   @NgModule({
       imports: [RouterModule.forChild(CR)],
       exports: [RouterModule]
   })
   // 类名改为CrRoutingModule，不要写CrModule
   export class CrRoutingModule { }
   

   记得在cr业务模块（cr.module.ts）的imports数组中引入CrRoutingModule，同时补上主路由文件APP_ROUTES数组缺失的闭合括号。

   • 如果你用的是PathLocationStrategy（默认路由模式，地址栏没有#），确认本地开发服务、部署服务器都配置了路由重定向规则，所有路径请求都返回index.html，避免路由匹配失败。

2. 替换页面跳转逻辑，统一走Angular Router
   不要用原生JS做应用内跳转，scheduler页跳cr页时用Router的跳转方法，或者模板里用routerLink指令：

   • 组件类中跳转：

   import { Router } from '@angular/router';
   constructor(private router: Router) {}
   goToCr(crId: string) {
     // 走Angular内部路由，不触发整页刷新
     this.router.navigate(['/cr'], { queryParams: { crId } });
   }
   

   • 模板中直接绑定：

   <button [routerLink]="['/cr']" [queryParams]="{crId: MONGODB_ID}">查看CR详情</button>
   

   这种跳转方式会把路由记录正确压入Angular管理的历史栈，回退时不会触发整页刷新，也不会跳出应用。

3. 优化回退逻辑，增加兜底判断
   不要直接无判断调用back()，增加历史栈长度判断，没有可回退的内部记录时直接跳回scheduler首页：

   import { Location } from '@angular/common';
   import { Router } from '@angular/router';
   
   constructor(
     private _location: Location,
     private router: Router
   ) {}
   
   backClicked() {
     if (window.history.length > 1) {
       this._location.back();
     } else {
       // 没有上一级历史记录时兜底跳首页
       this.router.navigateByUrl('/scheduler');
     }
   }
   

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