可以通过使用Angular的Resolve守卫来缓存数据，以便在每次访问某个路由时不需要从服务器中再次获取相同的数据。以下是一个示例：

// defining routes in app.module.ts const appRoutes: Routes = [ { path: '', component: HomeComponent, resolve: { data: HomeResolver } }, { path: 'products', component: ProductsComponent, resolve: { data: ProductResolver } } ];

// resolver for home component @Injectable() export class HomeResolver implements Resolve { constructor(private dataService: DataService) {}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.dataService.getHomeData(); } }

// resolver for products component @Injectable() export class ProductResolver implements Resolve { constructor(private dataService: DataService) {}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.dataService.getProducts(); } }

// data service to fetch data from server @Injectable() export class DataService { private homeData: any; private productsData: any;

constructor(private http: HttpClient) {}

getHomeData() { if (this.homeData) { return of(this.homeData); } else { return this.http.get('api/home').pipe( tap(data => this.homeData = data) ); } }

getProducts() { if (this.productsData) { return of(this.productsData); } else { return this.http.get('api/products').pipe( tap(data => this.productsData = data) ); } } }

在上面的代码中，我们定义了两个路由和两个Resolve守卫，分别为HomeComponent和ProductsComponent。在每个守卫中，我们使用一个DataService来获取数据。为了避免在每个路由进入时都从服务器获取相同的数据，我们可以使用DataService中的缓存机制，每个数据仅需要从服务器获取一次，并在之后的路由中重复使用