Angular框架下刷新当前页面时如何获取跳转前的上一级URL

问题原因 #

你当前使用 getCurrentNavigation() 取路由state的方式只在首次跳转至详情页的导航生命周期内有效，页面刷新后导航实例销毁，路由state数据会丢失，自然拿不到上一页地址。

可行实现方案 #

方案1：全局监听路由事件持久化存储上一页地址（最通用）

适合全站所有页面都需要取前页地址的场景，步骤如下：

1. 新建一个全局路由状态服务，监听路由跳转事件同时把前页地址存在sessionStorage中兜底，刷新也不会丢失

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

@Injectable({ providedIn: 'root' })
export class RouteStateService {
  private previousUrl = '';
  private currentUrl = '';

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
    // 监听路由跳转结束事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = this.currentUrl;
      this.currentUrl = event.urlAfterRedirects;
      // 存到sessionStorage，刷新页面也能读取
      sessionStorage.setItem('previousUrl', this.previousUrl);
    });
  }

  // 对外暴露取前页地址的方法
  getPreviousUrl(): string {
    // 优先取内存值，内存没有读sessionStorage，最后给个默认 fallback 地址
    return this.previousUrl || sessionStorage.getItem('previousUrl') || '/transactions/overview';
  }
}

2. 在详情页直接注入服务调用即可

// 构造器注入
constructor(private routeStateService: RouteStateService) {}

ngOnInit() {
  const prevUrl = this.routeStateService.getPreviousUrl();
  console.log('上一页地址：', prevUrl);
}

方案2：跳转时把前页地址同时存state和sessionStorage（适配你现有代码）

不需要改整体架构，只改现有跳转和取值逻辑即可：

1. 改跳转逻辑，把当前页地址追加到state里同时存sessionStorage

gotoDealDetails(state:any){
  // 追加前页地址到state
  state.previousUrl = this.router.url;
  this.route.navigateByUrl(`deals/detail/`, {state: state});
  // 存sessionStorage兜底
  sessionStorage.setItem('dealPrevUrl', this.router.url);
  // 如果transaction数据刷新也要用，也可以序列化后存sessionStorage
  sessionStorage.setItem('transactionData', JSON.stringify(state.data.transaction));
}

2. 详情页取值逻辑兼容刷新场景

constructor(
  private _route: Router,    
  private _dealService: DealService,
  private dialog: MatDialog,
  private _notificationService: NotificationService) {
  const navigation = this._route.getCurrentNavigation();
  // 优先取导航state，取不到就读sessionStorage
  if(navigation?.extras?.state) {
    this.urlData = navigation.extras.state.data;
    this.previousUrl = navigation.extras.state.previousUrl;
  } else {
    this.previousUrl = sessionStorage.getItem('dealPrevUrl') || '/transactions/overview';
    this.urlData = {
      transaction: JSON.parse(sessionStorage.getItem('transactionData'))
    }
  }
}

方案3：把前页地址作为查询参数携带

适合需要支持用户收藏详情页地址后打开还能回到对应前页的场景：

1. 改跳转逻辑加查询参数

gotoDealDetails(state:any){
  this.route.navigate(['/deals/detail'], {
    state: state,
    queryParams: { prev: encodeURIComponent(this.router.url) }
  });
}

2. 详情页读查询参数

import { ActivatedRoute } from '@angular/router';
// 构造器注入
constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.queryParams.subscribe(params => {
    if(params.prev) {
      this.previousUrl = decodeURIComponent(params.prev);
    }
  })
}

注意事项 #

如果用户直接通过链接打开详情页，没有从其他页面跳转过来，默认是拿不到前页地址的，需要根据业务场景设置默认回退地址，避免逻辑报错。

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