## 一、引言 tn> 路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；当然在绝大多数场景下这是合理的。进入组件时会执行 ngOnInit() 里面的初始化方法，使页面保持最开始的状态。但有些需求需要切换页面的时候，再切换回来该页面时保持原来的状态。此时我们就需要 Angular 的RouteReuseStrategy 贯穿路由状态并决定构建组件的方式。 说白了就是标签页进行切换时表单各种内容不会被更新不被销毁！  ## 二、RouteReuseStrategy tn> RouteReuseStrategy ：路由复用策略，提供了几种办法通俗易懂的方法： shouldDetach 是否允许复用路由 store 当路由离开时会触发，存储路由 shouldAttach 是否允许还原路由 retrieve 获取存储路由 shouldReuseRoute 进入路由触发，是否同一路由时复用路由 ## 三、使用步骤 + 创建路由复用车略接口`SimpleReuseStrategy.ts`,直接赋值即可，如果有需求可自行改动： ```typescript import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {} /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ public shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.routeConfig.path] = handle } /** 若 path 在缓存中有的都认为允许还原路由 */ public shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 从缓存中获取快照，若无则返回nul */ public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null } return SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 进入路由触发，判断是否同一路由 */ public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig } } ``` + 在app.module.ts中添加引入 ```typescript providers: [ //路由复用 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy } ], ``` + 这时候就可以使用了，可自己看效果！