带参数路由下Angular RouterReuseStrategy失效，无法保留表单数据求助

问题根源 #

你的CustomRouteReuseStrategy无法在带参数路由（如b/:userID）下工作，核心原因是路由存储和检索时使用的key不匹配：

• store方法通过原getUrl获取的是路由配置的静态路径（如b/:userID）
• shouldAttach方法却用实际路由的动态路径（如b/123）去查找存储的句柄
  两者key不一致，导致无法找到已保存的组件状态。

修复后的路由复用策略 #

修改CustomRouteReuseStrategy，统一使用包含实际参数的完整路径作为存储key，确保存储和检索逻辑一致：

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private routeLeftFrom: string | undefined;
  private handlers: { [key: string]: DetachedRouteHandle } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    this.routeLeftFrom = route.routeConfig?.path;
    return route.data['shouldReuseRoute'] || false;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    if (handler) {
      const key = this.getRouteKey(route);
      console.log(`[router-reuse] storing handler for key: ${key}`);
      this.handlers[key] = handler;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.getRouteKey(route);
    const hasStoredHandler = !!this.handlers[key];
    
    if (hasStoredHandler) {
      const reuseAllowed = route.data['reuseRoutesFrom']?.includes(this.routeLeftFrom);
      return reuseAllowed || false;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
      return null;
    }
    const key = this.getRouteKey(route);
    return this.handlers[key] || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    const reuseConfigured = future.routeConfig?.data?.['reuse'] || false;
    const defaultReuse = future.routeConfig === current.routeConfig;
    return reuseConfigured || defaultReuse;
  }

  // 生成包含实际参数的唯一路由key
  private getRouteKey(route: ActivatedRouteSnapshot): string {
    const fullPath = route.url.map(segment => segment.path).join('/');
    let parentPath = '';
    let current = route.parent;
    while (current) {
      parentPath = `${current.url.map(s => s.path).join('/')}/${parentPath}`;
      current = current.parent;
    }
    return parentPath + fullPath;
  }
}

关键修改点说明 #

1. 统一路由key生成逻辑：新增getRouteKey方法，生成包含实际参数值的完整路径（如b/123）作为存储key，确保不同参数的路由实例可以被正确区分和复用。
2. 同步存储与检索的key：store、shouldAttach、retrieve方法均使用getRouteKey获取key，彻底避免key不匹配的问题。
3. 简化来源校验逻辑：优化shouldAttach中的来源校验逻辑，确保只有从配置的允许路由（如a）返回时才复用组件。

验证效果 #

修改后，当你从b/123跳转到a，再返回b/123时，组件B的表单数据会被正确保留；如果跳转到b/456，则会创建新的组件实例，互不干扰。

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