Angular调用location.back()返回时重载整个应用问题排查

我之前也碰到过类似的问题，结合StackBlitz的环境特性和Angular路由的工作机制，大概有这几个原因：

• StackBlitz在线环境的特殊路由处理
  StackBlitz的预览运行在iframe里，它的路由处理逻辑和本地开发环境不太一样。当你调用原生的location.back()时，浏览器会直接操作历史记录回退，但StackBlitz的环境可能会把这个动作识别成跨页面跳转，进而触发整个应用的资源重载，而不是让Angular的单页路由来处理。

• 绕开了Angular的Router路由机制
  Angular本身提供了专门的Router服务来管理单页应用的导航，它会维护自己的路由历史栈，在导航时只会更新页面的局部内容，不会整页刷新。但location.back()是浏览器的原生API，完全绕开了Angular的路由系统，直接告诉浏览器回退，这就可能导致浏览器重新请求整个应用的页面资源。

  正确的做法应该用Angular的Router来实现回退，比如这样写：

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  goBack(): void {
    // 对于Angular 14及以上版本，可以用更简洁的navigateBack
    this.router.navigateBack();
    // 或者用相对路由导航回上一级
    // this.router.navigate(['../']);
  }
  

• base href配置的潜在问题
  如果项目的base href配置和StackBlitz的预览环境不匹配，原生的location.back()可能会导航到错误的路径，浏览器找不到对应资源就会触发整页刷新。StackBlitz的默认base href配置有时候和本地开发环境有差异，这也会加重这个问题。

总的来说，只要改用Angular官方推荐的Router服务来处理回退导航，就能避免整页重载的问题啦～

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