Angular 2：if条件下router.navigate跳转失效问题求助

我来帮你搞定这个头疼的问题～你说条件判断逻辑没问题（跳外部URL正常），但用router.navigate跳/inventory时自动跑到dashboard，这大概率是路由配置或者守卫的锅，咱们一步步来排查：

1. 先查路由配置的重定向规则 #

先打开你的路由配置文件（一般是app-routing.module.ts），重点看这几点：

• 有没有给/inventory配置错误的redirectTo，比如像下面这样的错误配置会直接把请求转去dashboard：

// 错误示例！别这么写
const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'inventory', redirectTo: '/dashboard' }, // 这条会直接把/inventory重定向走
  { path: 'inventory', component: InventoryComponent },
];

• 注意路由的匹配顺序：Angular是从上到下匹配路由的，所以要把具体的路由（比如/inventory）放在通用重定向（比如path: ''）的后面，不然会被提前匹配走。

2. 检查路由守卫（Route Guards） #

如果你的/inventory路由配置了守卫（比如CanActivate、CanLoad），那很大可能是守卫里的逻辑强制把你重定向到了dashboard。比如检查守卫类里有没有类似这样的代码：

@Injectable()
export class InventoryGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 如果这里的判断逻辑出错，就会跳去dashboard
    if (!someValidCondition) {
      this.router.navigate(['/dashboard']);
      return false;
    }
    return true;
  }
}

另外也要看看全局的路由守卫（比如应用级的CanActivateChild）有没有影响到/inventory的跳转。

3. 调整跳转的时机和方式 #

有时候在组件生命周期钩子（比如ngOnInit）里直接调用跳转，可能会和其他路由逻辑冲突。可以试试延迟执行跳转，或者换用navigateByUrl：

// 试试延迟执行
if(!(isStockManager())) { 
  setTimeout(() => {
    this.router.navigate(['/inventory']);
  }, 0);
}

// 或者换用navigateByUrl
this.router.navigateByUrl('/inventory');

4. 检查组件导入和路由拼写 #

最后确认下InventoryComponent已经正确导入到路由模块里，路由配置里的component属性指向的是正确的组件类，没有拼写错误（比如把InventoryComponent写成InventoryComponet这种低级错误）。

另外，打开浏览器开发者工具的Console标签，看看有没有路由相关的错误提示，这往往能快速定位问题～

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