Angular 2中router.navigate()部分跳转正常、部分跳首页问题求助

看起来你遇到的问题是路由导航在部分场景下匹配失败，触发了默认的首页路由。结合你给出的代码，我整理了几个可能的原因和对应的解决方案：

1. 路由参数拼接方式错误，导致路径匹配失败 #

你当前的跳转代码是直接拼接字符串：

this.router.navigate(['news/' + urlLink]);

这种写法如果urlLink包含斜杠/或者特殊字符（比如?、#），会生成不符合路由规则的路径（比如news/abc/def），而你的路由配置只有news/:urlLink，无法匹配时就会跳转到默认的首页路由。

解决方案：使用路由参数的正确传递方式 #

Angular的router.navigate()支持数组形式传递路径段和参数，会自动对参数进行编码处理：

public forwardURL(urlLink: string) {
  // 用数组拆分路径和参数，而不是拼接字符串
  this.router.navigate(['news', urlLink]);
}

2. urlLink参数为空或未正确传递 #

如果urlLink是空字符串、undefined或者null，跳转后的路径会变成news/，同样无法匹配news/:urlLink规则，从而触发首页跳转。

解决方案：跳转前校验参数合法性 #

在执行导航前添加参数检查：

public forwardURL(urlLink: string) {
  // 校验参数是否有效
  if (!urlLink || urlLink.trim() === '') {
    console.error('urlLink参数无效');
    // 可以添加用户提示或其他处理逻辑
    return;
  }
  this.router.navigate(['news', urlLink]);
}

3. 路由参数订阅逻辑存在异常 #

你在article.reader.ts里的路由参数订阅代码只写了开头，需要检查这部分逻辑是否有意外触发首页导航的代码，比如错误调用了this.router.navigate([''])之类的逻辑。

辅助调试：启用路由追踪 #

如果以上方法还没解决问题，可以开启Angular的路由追踪功能，查看导航过程的详细日志：
在app.module.ts的路由配置中添加enableTracing选项：

RouterModule.forRoot(appRoutes, { enableTracing: true })

打开浏览器控制台，就能看到路由跳转的每一步细节，帮助你定位到底是哪一步导致了跳转到首页。

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