Angular 实现 keep-alive (路由复用)

摘要

Angular 的路由复用策略（RouteReuseStrategy）是一种用于优化路由跳转性能和提高用户体验的机制。通过实现RouteReuseStrategy接口，后可以自定义路由的复用行为，避免不必要的组件销毁和重建，同时保持组件的状态。
 

一、基本概念

RouteReuseStrategy是 Angular 路由模块提供的一个接口，用于控制路由的复用逻辑。当路由切换时，如果目标路由与当前路由使用相同的组件，通过实现这个接口可以避免组件的重新创建，而是复用现有的组件实例。

二、主要作用

1.避免不必要的组件销毁和重建：

通过复用组件实例，可以减少 DOM 操作和组件生命周期钩子的调用次数，从而提高应用的性能。

2.保持组件状态：

在路由切换时，如果组件被复用，那么它的状态（如表单输入、滚动位置等）也会被保留，从而提升用户体验。

三、解决存在的问题(使用场景)

在项目中，我们采用了 Cesium 库来构建并加载三维场景。开发过程中注意到一个用户体验上的显著痛点：每当页面发生跳转并重新返回至 Cesium 场景时，都需要重新进行整个三维场景的加载，这一过程不仅延长了用户的等待时间，降低了整体应用的流畅性，还额外增加了系统资源的消耗，对设备的性能提出了更高要求。

为了解决这个问题，计划采取一种优化策略：将 Cesium 实例化的页面进行 keep-alive 处理。通过这一技术手段，我们可以确保在页面跳转时，Cesium 场景及其加载的所有资源（如地形数据、模型等）能够保持活跃状态，而非被销毁并重新加载。这样，当用户再次访问该页面时，能够立即看到之前已经加载完成的场景，无需经历冗长的加载过程，从而显著提升应用的响应速度和用户体验。

四、实现方法

实现 RouteReuseStrategy

shouldDetach()是否允许复用路由
store()当路由离开时会触发，存储路由
shouldAttach() 是否允许还原路由
retrieve()获取存储路由
shouldReuseRoute()进入路由触发，是否同一路由时