Angular页面刷新时如何保留路由参数中的数据？

你的代码在刷新时崩溃，核心问题是依赖router.events订阅获取路由数据的时机不对——刷新页面时，Angular重新初始化组件，router.events触发时路由解析器（resolve）可能还未完成数据加载，导致this.route.snapshot.data.myProducts为undefined，后续的JSON.stringify或模板渲染会引发错误。

下面是修复方案：

1. 改用ActivatedRoute.data订阅获取路由数据 #

直接监听路由数据的变化，确保数据加载完成后再执行操作，同时结合localStorage做刷新时的临时数据恢复：

constructor(private route: ActivatedRoute) {
  // 刷新时先从localStorage恢复已有数据
  const savedItems = localStorage.getItem('s');
  if (savedItems) {
    this.items = JSON.parse(savedItems);
  }

  // 订阅路由数据更新，同步到items和localStorage
  this.route.data.subscribe((data) => {
    // 先判断数据是否存在，避免undefined报错
    if (data.myProducts) {
      this.items = data.myProducts;
      localStorage.setItem('s', JSON.stringify(this.items));
    }
  });
}

2. 确保路由配置的Resolve守卫正常工作 #

route.data.myProducts的数据应该来自路由的Resolve守卫，刷新页面时Angular会重新执行Resolve逻辑，所以要保证你的Resolve守卫能正确返回数据。示例路由配置：

import { YourProductsResolver } from './path-to-resolver';

const routes: Routes = [
  {
    path: 'your-target-path',
    component: YourComponent,
    resolve: {
      myProducts: YourProductsResolver // 这里对应你路由数据的key
    }
  }
];

3. 关键注意点 #

• 必须在订阅路由数据时添加data.myProducts的存在判断，避免刷新时Resolve未完成导致的undefined赋值或序列化错误。
• localStorage仅作为刷新时的临时数据兜底，最终数据还是以路由Resolve返回的最新数据为准，保证数据一致性。

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