Angular中beforeunload事件获取当前路由URL异常问题

问题出在你仅在beforeunload事件中一次性获取router.url，但这个时机下Angular的路由状态可能未正确同步，或者根组件的router.url没有实时更新到当前路由。

正确方案：实时监听路由变化存储URL #

不用等到刷新时再获取路由，而是每次路由跳转完成就把当前URL存入sessionStorage，这样能保证存储的是最新路由：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  // 订阅路由跳转完成事件
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    // 存储包含重定向后的完整URL
    sessionStorage.setItem('lastRoute', event.urlAfterRedirects);
  });
}

之后刷新页面时，直接从sessionStorage读取lastRoute做跳转即可，beforeunload事件可以不用再保留。

若坚持用beforeunload的替代写法 #

如果一定要在刷新时才存储，别依赖this.router.url，改用浏览器原生的window.location获取当前URL，它能直接反映页面真实路由：

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(_event) {
  const currentUrl = window.location.pathname + window.location.search;
  console.log(currentUrl);
  sessionStorage.setItem('lastRoute', currentUrl);
}

为什么this.router.url会返回'/'？ #

根组件app.component初始化时router.url默认是根路径/，后续路由变化时，若没有主动订阅路由事件触发变更检测，组件内的router.url不会自动更新。而beforeunload属于浏览器原生事件，不在Angular的变更检测上下文里，导致你拿到的始终是初始的根路径值。

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