Angular 16路由守卫失效：无法阻止导航问题求助

这不是Angular 16的Bug，而是路由系统的行为优化导致的：Angular 16对重定向路由的处理逻辑进行了调整，CanActivate守卫不会再触发——因为重定向操作会在路由匹配阶段就完成，不会进入路由激活阶段，而CanActivate是作用于激活阶段的守卫。

以下是两种可行的修复方案：

方案一：改用CanMatch守卫替代CanActivate #

CanMatch守卫作用于路由匹配阶段，会在Angular决定是否使用该路由之前触发，刚好适配重定向路由的场景。

修改后的代码示例：

@Injectable({ providedIn: 'root' })
export class MyGuard implements CanMatch {
  canMatch(route: Route, segments: UrlSegment[]): boolean {
    return false;
  }
}

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full', canMatch: [MyGuard] },
  {
    path: 'carousel',
    loadChildren: () => import('./carousel/carousel.module').then((m) => m.CarouselModule),
  },
];

如果想简化实现，也可以直接使用lambda守卫：

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full', canMatch: () => false },
  {
    path: 'carousel',
    loadChildren: () => import('./carousel/carousel.module').then((m) => m.CarouselModule),
  },
];

方案二：移除路由逻辑，改用纯前端交互实现下拉 #

对于仅用于展开下拉菜单、不需要路由跳转的导航项，直接去掉routerLink，用普通元素配合Bootstrap原生交互实现下拉，更直观且避免路由相关问题：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" routerLink="/carousel">轮播组件</a></li>
    <!-- 其他下拉菜单项 -->
  </ul>
</li>

这里通过href="#"和data-bs-toggle="dropdown"触发Bootstrap下拉逻辑，完全不涉及路由绑定，既满足需求，也不会触发任何路由行为。

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