如何仅为特定路由激活RouteReuseStrategy并实现自定义路由树复用

嘿，这个需求我之前在项目里刚好折腾过，核心思路就是通过路由元数据标记+策略分发来实现，我给你一步步拆解清楚：

首先，我们可以在路由配置的data字段里添加自定义标记，用来标识哪些路由需要启用复用，以及该用哪套自定义策略。比如：

{ 
  path: 'dashboard', 
  component: DashboardComponent, 
  data: { reuse: true, reuseStrategy: 'dashboard' }, // 标记启用复用+指定策略key
  children: [/* 子路由同样可以加对应标记 */]
}

一、实现基础的策略分发框架 #

先写一个全局的RouteReuseStrategy实现，它的作用是根据路由元数据，把复用逻辑分发到对应的专属策略里，而不是自己处理所有细节：

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

// 定义自定义策略的统一接口，确保所有专属策略都遵循相同方法
interface CustomReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean;
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
  shouldAttach(route: ActivatedRouteSnapshot): boolean;
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
}

// 策略容器：用来存放和管理所有自定义策略
class ReuseStrategyContainer {
  private strategies = new Map<string, CustomReuseStrategy>();

  addStrategy(key: string, strategy: CustomReuseStrategy) {
    this.strategies.set(key, strategy);
  }

  getStrategy(key: string): CustomReuseStrategy | null {
    return this.strategies.get(key) || null;
  }
}

// 全局实例化容器
export const reuseStrategyContainer = new ReuseStrategyContainer();

// 主策略类：负责根据路由标记分发逻辑
export class AppRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const strategyKey = route.data?.reuseStrategy;
    // 只有标记了reuse且指定了策略的路由，才交给对应策略处理
    if (route.data?.reuse && strategyKey) {
      const strategy = reuseStrategyContainer.getStrategy(strategyKey);
      return strategy ? strategy.shouldDetach(route) : false;
    }
    return false; // 默认不复用
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const strategyKey = route.data?.reuseStrategy;
    if (route.data?.reuse && strategyKey) {
      const strategy = reuseStrategyContainer.getStrategy(strategyKey);
      strategy?.store(route, handle);
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const strategyKey = route.data?.reuseStrategy;
    if (route.data?.reuse && strategyKey) {
      const strategy = reuseStrategyContainer.getStrategy(strategyKey);
      return strategy ? strategy.shouldAttach(route) : false;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const strategyKey = route.data?.reuseStrategy;
    if (route.data?.reuse && strategyKey) {
      const strategy = reuseStrategyContainer.getStrategy(strategyKey);
      return strategy?.retrieve(route) || null;
    }
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const futureStrategyKey = future.data?.reuseStrategy;
    if (future.data?.reuse && futureStrategyKey) {
      const strategy = reuseStrategyContainer.getStrategy(futureStrategyKey);
      return strategy ? strategy.shouldReuseRoute(future, curr) : future.routeConfig === curr.routeConfig;
    }
    // 未标记的路由使用Angular默认逻辑：路由配置相同则复用
    return future.routeConfig === curr.routeConfig;
  }
}

二、为特定路由树实现专属复用策略 #

比如我们要给dashboard路由树（包括它的所有子路由）实现一套专属的复用逻辑，就可以写一个对应的策略类：

// Dashboard路由树专属复用策略
export class DashboardReuseStrategy implements CustomReuseStrategy {
  // 存储当前路由树的路由句柄，用路由唯一key做索引
  private storedHandles = new Map<string, DetachedRouteHandle>();

  // 仅当路由属于dashboard路由树且标记了reuse时，允许缓存
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const isInDashboardTree = route.pathFromRoot.some(r => r.routeConfig?.path === 'dashboard');
    return isInDashboardTree && route.data?.reuse;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const key = this.generateRouteKey(route);
    this.storedHandles.set(key, handle);
  }

  // 检查当前路由是否有已缓存的句柄
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.generateRouteKey(route);
    return this.storedHandles.has(key);
  }

  // 获取缓存的路由句柄
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const key = this.generateRouteKey(route);
    return this.storedHandles.get(key) || null;
  }

  // 自定义路由复用判断逻辑：仅当dashboard路由树内的路由路径完全匹配时才复用
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const futureInDashboard = future.pathFromRoot.some(r => r.routeConfig?.path === 'dashboard');
    const currInDashboard = curr.pathFromRoot.some(r => r.routeConfig?.path === 'dashboard');
    
    if (futureInDashboard && currInDashboard) {
      return this.generateRouteKey(future) === this.generateRouteKey(curr);
    }
    // 非dashboard路由使用默认逻辑
    return future.routeConfig === curr.routeConfig;
  }

  // 生成路由唯一key：基于从根到当前路由的完整路径
  private generateRouteKey(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot.map(r => r.routeConfig?.path || '').join('/');
  }
}

三、注册策略并配置路由 #

1. 在AppModule中注册主策略和专属策略 #

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { AppRouteReuseStrategy, reuseStrategyContainer, DashboardReuseStrategy } from './app-route-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy } // 注册主策略
  ]
})
export class AppModule {
  constructor() {
    // 把dashboard专属策略注册到容器里，对应路由标记里的key
    reuseStrategyContainer.addStrategy('dashboard', new DashboardReuseStrategy());
  }
}

2. 给目标路由添加复用标记 #

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: { reuse: true, reuseStrategy: 'dashboard' },
    children: [
      { path: 'stats', component: StatsComponent, data: { reuse: true, reuseStrategy: 'dashboard' } },
      { path: 'settings', component: SettingsComponent, data: { reuse: true, reuseStrategy: 'dashboard' } }
    ]
  },
  { path: 'other', component: OtherComponent }, // 这个路由不会启用复用
  // 其他路由...
];

四、关键细节提示 #

• 路由树范围控制：通过route.pathFromRoot可以获取从根路由到当前路由的所有快照，以此判断路由是否属于目标路由树，确保专属策略只在指定范围内触发。
• 策略隔离：每个专属策略维护自己的缓存容器，不同路由树的复用逻辑完全独立，不会互相干扰。
• 默认兼容：未标记reuse的路由会自动使用Angular默认的复用逻辑，不会影响项目中其他路由的正常行为。

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