Angular 5组件内使用navigate/navigateByUrl导航失败求助

我之前在做带AuthGuard的Angular后台仪表盘时也踩过类似的路由导航坑，用[routeLink]正常但router.navigate/navigateByUrl死活不生效，给你梳理几个大概率能解决问题的排查方向：

第一步：先确认Logistics模块的子路由配置 #

因为你要跳转的/logistics/print/:id是Logistics模块下的子路由，首先得确保这个路由在LogisticsRoutingModule里配置正确，应该是这样的结构：

const routes: Routes = [
  { path: 'new', component: NewLogisticsComponent }, // 你的新建组件路由
  { path: 'print/:id', component: PrintLogisticsComponent }, // 打印组件路由，必须带参数占位符:id
  // 其他Logistics模块下的路由...
];

如果这里漏了配置或者参数占位符写错，导航肯定找不到对应的组件。

第二步：检查组件内的依赖注入 #

你在new组件里导航时，必须正确注入Router和ActivatedRoute，构造函数里要写全：

constructor(
  private router: Router,
  private route: ActivatedRoute // 用于相对导航定位当前路由
) {}

如果漏了ActivatedRoute，relativeTo参数就会失效，相对导航自然没用。

第三步：修正导航代码的写法 #

结合你的路由结构，给你两种可行的写法：

写法1：绝对路径导航（最稳妥） #

直接写完整的路由路径，适合跨模块导航或者不确定当前路由层级的情况：

this.router.navigate(['/logistics/print', 2]);
// 或者用navigateByUrl
this.router.navigateByUrl('/logistics/print/2');

注意这里必须加开头的/，代表从根路由开始的绝对路径。

写法2：相对路径导航（更灵活） #

因为new组件和print组件同属logistics父路由下的子路由，你可以基于当前路由的父级来跳转：

// ../ 表示回到当前路由的父级（也就是/logistics），再跳转到print/2
this.router.navigate(['../print', 2], { relativeTo: this.route });

之前你用relativeTo没生效，大概率是路径里没加../，直接写logistics/print相当于在当前路由/logistics/new下再加一层，变成/logistics/new/logistics/print/2，这显然不对。

第四步：排查AuthGuard的拦截问题 #

因为你的项目带AuthGuard，要检查print路由是不是配置了Guard，并且Guard的逻辑是否允许当前用户访问：

• 可以临时注释掉print路由的canActivate: [AuthGuard]配置，测试能不能正常导航，如果可以，那就是Guard里的逻辑有问题（比如用户权限判断错误、异步逻辑没处理好）。
• 打开浏览器控制台，看看有没有Guard相关的报错或者日志，这能快速定位问题。

第五步：查看控制台的路由错误 #

打开浏览器开发者工具的Console面板，看看有没有类似Cannot match any routes. URL Segment: 'logistics/print/2'的错误，这类错误直接说明路由配置有问题，照着提示修正就行。

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