Angular12升级至13后RouteReuseStrategy与懒加载功能异常

问题分析 #

Angular 13 对路由系统的内部逻辑做了调整，尤其是懒加载路由的快照处理机制。你当前自定义的 RouteReuseStrategy 中，通过手动拼接 pathFromRoot 生成路由标识的方式，无法正确识别懒加载路由的完整路径结构，导致存储/恢复路由时出现匹配错误，最终表现为切换懒加载组件时URL不更新、视图无响应，而非懒加载组件不受影响。

修复方案 #

方案1：使用Angular内置方法生成可靠路由标识 #

替换手动拼接URL的逻辑，利用Router的createUrlTree方法生成完整路由地址，该方法能自动处理懒加载路由的快照特性，避免手动拼接的误差。

首先在自定义策略中注入Router：

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

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  handlers: { [key: string]: DetachedRouteHandle } = {};

  constructor(private router: Router) {}

  // Decides if the route should be stored
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  // Store the information for the route we're destructing
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const URL = this.getFullUrl(route);
    this.handlers[URL] = handle;
  }

  // Return true if we have a stored route object for the next route
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const URL = this.getFullUrl(route);
    return !!this.handlers[URL];
  }

  // If we returned true in shouldAttach(), now return the actual route data for restoration
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const URL = this.getFullUrl(route);
    const COMPONENT: DetachedRouteHandle = this.handlers[URL];
    return COMPONENT ? COMPONENT : null;
  }

  // Reuse the route if we're going to and from the same route
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return this.getFullUrl(curr) === this.getFullUrl(future);
  }

  private getFullUrl(route: ActivatedRouteSnapshot): string {
    return this.router.createUrlTree([], { relativeTo: route }).toString();
  }
}

方案2：优化路由复用判断逻辑 #

Angular 13 中，懒加载路由的快照对比需要更严谨的校验，除了URL匹配外，需同时验证路由配置的一致性，避免错误触发路由复用：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  const currUrl = this.getFullUrl(curr);
  const futureUrl = this.getFullUrl(future);
  return future.routeConfig === curr.routeConfig && currUrl === futureUrl;
}

方案3：过滤空路径片段（针对原有拼接逻辑的修复） #

如果坚持使用手动拼接URL的方式，需过滤pathFromRoot中的空路径片段，避免生成错误的路由标识：

private getFullUrl(route: ActivatedRouteSnapshot) {
  const urlSegments = route.pathFromRoot
    .flatMap(subRoute => subRoute.url)
    .map(segment => segment.path)
    .filter(path => path); // 移除空路径片段
  return `/${urlSegments.join('/')}`;
}

验证步骤 #

1. 替换上述任意方案后，重新构建并启动项目
2. 依次导航到懒加载组件、其他路由，再切回懒加载组件，检查URL更新及视图恢复情况
3. 测试多个懒加载组件的切换场景，确保路由复用逻辑稳定运行

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