Angular：如何通过守卫拦截无参数/dashboard路由并重定向至首页

问题背景 #

我需要阻止用户将URL从/dashboard/1234-12修改为/dashboard以避免报错，因此希望在用户访问不带id参数的/dashboard时自动重定向至/home。

现有配置 #

路由配置

{
  path: 'dashboard/:id',
  component: DashboardComponent,
  canActivate: [CanActivateViaAuthGuard, CheckVidGuard],
},

CheckVidGuard 代码

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): boolean {
  const vid = route?.params?.vid;

  if (!vid) {
    this.router.navigate(['/home']);
    return false;
  }

  return true;
}

Dashboard 组件代码

ngOnInit() {
  this.id = this.activatedRoute.snapshot.paramMap?.get('id');
}

遇到的问题 #

访问不带id的/dashboard时，并未触发重定向至/home，反而抛出错误：

Error: NG04002: Cannot match any routes. URL Segment: 'dashboard'

尝试过的方法均无效：

• 确认未定义不带id的/dashboard路由，但绑定在dashboard/:id上的守卫未生效
• 添加以下路由后可以正常工作，但不想新增该路由：

{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [CanActivateViaAuthGuard],
},

• 使用Resolver也无法解决问题：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string {
  const vid = route.params['vid'];
  if (!vid) {
    this.router.navigate(['/home/dashboard']);
    return null;
  }
  return vid;
}

问题原因 #

Angular的路由守卫仅在路由匹配成功时才会触发。当访问/dashboard时，Angular找不到对应的路由定义，因此不会执行dashboard/:id路由上的任何守卫，直接抛出路由不匹配错误。

解决方案 #

最优方案：添加直接重定向路由

无需新增组件或修改现有守卫，只需在路由配置中添加一条匹配/dashboard的重定向路由：

{
  path: 'dashboard',
  redirectTo: '/home',
  pathMatch: 'full'
}

这条路由会精准匹配/dashboard路径，直接将用户重定向至/home，完全满足需求。

备选方案：用守卫处理额外逻辑（若需要）

如果重定向前需要执行额外校验逻辑，可以添加一个绑定守卫的空路由（需创建一个仅含空模板的EmptyComponent）：

{
  path: 'dashboard',
  canActivate: [CheckVidGuard],
  component: EmptyComponent
}

此时访问/dashboard会触发CheckVidGuard，由于route.params中没有vid，守卫会自动导航至/home。

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