能否在NavigationStart事件的回调函数中取消Angular路由导航？

能否直接在NavigationStart事件中取消导航？ #

不行。NavigationStart事件只是Angular路由发出的导航启动通知，事件对象本身并没有preventDefault()这类可以取消导航的方法，你代码里写的event.preventDefault()是无效的。

那该怎么在导航开始阶段取消路由导航？ #

推荐用Angular官方提供的路由守卫来控制导航，这是最规范的方式；如果一定要在NavigationStart回调里处理，也有变通方法，但不推荐。

方法1：使用路由守卫（推荐方案）

比如用CanActivate守卫，在导航触发前就做判断，直接决定是否允许导航：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class NavigationGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const needCancel = true; // 替换成你的实际判断逻辑
    if (needCancel) {
      // 取消导航，可选跳转到其他页面
      this.router.navigate(['/home']);
      return false;
    }
    return true;
  }
}

然后在路由配置里绑定守卫：

const routes: Routes = [
  { 
    path: 'target-page', 
    component: TargetComponent, 
    canActivate: [NavigationGuard] 
  }
];

方法2：在NavigationStart回调中中断导航（不推荐）

如果非要在NavigationStart里处理，可以通过跳转回当前路由的方式中断导航，但容易引发导航循环，谨慎使用：

import { Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      const needCancel = true; // 你的判断条件
      if (needCancel) {
        // 跳转到当前路由，中断原导航
        this.router.navigate([event.url], { skipLocationChange: true });
      }
    }
  });
}

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