Angular刷新子路由页面跳转及状态丢失问题如何解决？

问题根因 #

你的问题路由配置和state使用逻辑都有问题：

• 首先你跳转时用的路由是deals/detail/，但子路由定义的是detail/:data需要带路径参数，路径不匹配导致刷新时路由找不到对应页面，直接跳转到其他默认路由
• 其次Angular路由通过navigateByUrl传入的state是存在浏览器内存的History对象中，刷新页面后内存数据会清空，如果没有兜底的拉取数据逻辑，就会出现状态丢失的情况

解决方案 #

1. 修正路由配置 #

把子路由的路径参数改为仅传唯一标识dealId，不要将整个数据对象塞到路径参数里：

RouterModule.forChild([
  {
    path: 'detail/:dealId',  
    canActivate: [AuthGuard], 
    component: DealDetailsComponent, 
    data: {
      userRoles: [Roles.ADMIN]
    },
  },
])

2. 修正跳转逻辑 #

跳转时在url上拼接dealId，保证刷新后路径可以正确匹配到详情页：

gotoDealDetails(state:any){
  // 路径带上dealId参数，保证路由可以匹配
  this.route.navigateByUrl(`deals/detail/${state.data.dealId}`, {state: state});
}

3. 详情页新增数据兜底逻辑 #

在DealDetailsComponent初始化时，优先从路由state拿数据，拿不到（刷新场景）就用路径上的dealId调用接口拉取对应数据：

import { ActivatedRoute } from '@angular/router';
import { DealService } from 'xxx'; // 替换为你自己的deal查询服务

constructor(
  private route: ActivatedRoute,
  private dealService: DealService
) {}

ngOnInit() {
  // 先拿路由state的数据
  const routeState = window.history.state;
  if (routeState?.data) {
    // 正常跳转场景，直接用state的数据
    this.initPage(routeState.data);
  } else {
    // 刷新场景，拿url里的dealId拉取数据
    const dealId = this.route.snapshot.paramMap.get('dealId');
    this.dealService.getDealById(dealId).subscribe(res => {
      // 构造需要的页面数据，初始化页面
      const pageData = {
        dealId: dealId,
        deal: res,
        dealName: res.name,
        // 其他需要的字段同步拉取或者拼接
      }
      this.initPage(pageData);
    })
  }
}

initPage(data: any) {
  // 你原来的页面初始化逻辑
}

子路由child outlet说明 #

你现在的主路由配置已经把deals模块作为Dashboard的子路由加载，只要详情页的路径可以正确匹配，刷新后会自动在Dashboard的router-outlet里加载详情组件，不会跳出当前布局。

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