Angular：根据URL获取路由定义以显示上一页名称

方法1：解析URL匹配路由配置获取数据 #

Angular Router自带URL解析和路由匹配能力，无需手动维护导航历史，可直接从路由配置中提取目标URL对应的路由数据：

1. 注入Router服务到组件/服务中：

import { Router } from '@angular/router';

constructor(private router: Router) {}

2. 编写匹配方法：

getRouteDataByUrl(targetUrl: string) {
  // 解析URL，提取路径部分（去除域名、端口）
  const parsedUrl = this.router.parseUrl(targetUrl);
  const pathSegments = parsedUrl.root.children['primary'].segments.map(s => s.path).join('/');

  // 遍历路由配置，匹配对应路由
  for (const route of this.router.config) {
    if (route.children) {
      const matchedChild = route.children.find(child => child.path === pathSegments);
      if (matchedChild) return matchedChild.data;
    } else if (route.path === pathSegments) {
      return route.data;
    }
  }
  return null;
}

3. 调用方法获取数据：
   针对http://localhost:4200/path1，直接传入URL即可拿到目标数据：

const routeData = this.getRouteDataByUrl('http://localhost:4200/path1');
// 返回结果：{ routeName: "RouteName1" }

方法2：结合浏览器History状态匹配history.back场景 #

如果是为了在history.back后显示上一页名称，可利用浏览器History状态存储路由数据，避免独立维护导航历史：

1. 导航时存储当前路由数据到History状态：

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

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 获取当前激活路由的快照数据
      let currentRoute = this.router.routerState.root;
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      const currentRouteData = currentRoute.snapshot.data;
      // 将数据存入History状态
      history.replaceState({ routeData: currentRouteData }, '', event.urlAfterRedirects);
    }
  });
}

2. 读取上一页的路由名称：

getPreviousPageName() {
  // 用户点击history.back后，History状态会保留上一页的路由数据
  return history.state?.routeData?.routeName;
}

这种方式完全贴合history.back的行为，不会出现历史记录不匹配的问题。

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