Angular 18：如何根据Resolve结果实现页面重定向

安全阿岳

2026-6-16

Angular 18 导航前解析数据并按需重定向方案

你不需要拆分使用resolve和canActivate，可以直接在Resolver函数里完成数据获取、判断和重定向逻辑，保证导航前完成所有处理，避免组件初始化后再跳转的问题。

具体实现代码：

const routes: Route[] = [
  {
    path: ":key",
    component: ArtComponent,
    resolve: {
      art: () => {
        const artService = inject(ArtService);
        const router = inject(Router);
        const key = inject(ActivatedRouteSnapshot).paramMap.get('key');
        
        // 先判断key参数是否存在
        if (!key) {
          return router.parseUrl('/404');
        }

        return artService.get(key).pipe(
          map(art => {
            // 数据为空则重定向到404
            if (!art) {
              return router.parseUrl('/404');
            }
            // 数据有效则返回，自动绑定到组件的@Input() art属性
            return art;
          })
        );
      }
    }
  },
  {
    path: '404',
    component: NotFoundComponent // 替换成你的404页面组件
  }
];

关键逻辑说明：

通过inject(ActivatedRouteSnapshot)获取URL中的key参数，先校验参数是否存在，不存在直接跳转到404
调用服务获取数据后，用map操作符判断返回值：
- 若返回null，返回router.parseUrl('/404')，Angular会自动触发重定向
- 若数据有效，直接返回数据，会自动绑定到组件对应的@Input() art属性
确保路由配置中已定义404路径对应的组件