Angular 4中RouterLink路由异常问题求助

看起来你遇到的是RouterLink没有正确匹配目标路由，反而把参数解析成一堆查询参数的问题——这种情况我在Angular项目里碰到过好几次，大概率是路由配置和参数传递的匹配出了问题，下面给你一步步排查的方案：

1. 先检查路由配置是否正确 #

这是最常见的原因：你必须在路由模块里明确定义带参数的路由路径，否则Angular会把额外的参数当成查询参数处理。

比如你的目标路由是/CostofOwnership/ownership-result/[cons.name的值]，那在app-routing.module.ts（或对应的子路由模块）里的配置应该是这样的：

const routes: Routes = [
  // 其他路由配置...
  {
    path: 'CostofOwnership/ownership-result/:name', // 这里的:name是参数占位符，必须和你传递的参数对应
    component: OwnershipResultComponent // 替换成你实际的结果页组件
  }
];

如果是子路由的结构（比如CostofOwnership是父路由），那配置应该是：

{
  path: 'CostofOwnership',
  component: CostofOwnershipComponent,
  children: [
    // 子路由里定义带参数的路径
    { path: 'ownership-result/:name', component: OwnershipResultComponent }
  ]
}

2. 确认cons.name的类型和值 #

你的RouterLink写法[routerLink]="['/CostofOwnership/ownership-result', cons.name]"本身是正确的，但如果cons.name不是字符串类型，而是一个对象，Angular会自动把这个对象的所有属性转成查询参数，这就会导致你看到的URL里一堆changeName参数。

所以先在组件里打印cons.name的值，确认它是一个字符串：

console.log('cons.name:', this.cons.name); // 检查输出是不是你预期的字符串

如果cons.name是对象，那你需要提取里面的具体字符串属性，比如cons.name.displayName之类的，再传递给RouterLink。

3. 排查路由匹配优先级问题 #

如果你的路由配置里有优先级更高的路由（比如通配符路由**、空路径路由''），可能会导致Angular先匹配到其他路由，然后把参数当成查询参数带上。

举个例子，如果你的路由里有这样的配置：

{ path: '', component: HomeComponent }

而它的位置在你的带参数路由前面，Angular可能会优先匹配空路径，然后把你的参数转成查询参数。解决方法是把带参数的路由放在更靠前的位置，或者调整路由顺序（Angular路由是按顺序匹配的，前面的优先级更高）。

4. 用Router.navigate手动跳转测试 #

为了排除模板里的问题，你可以在组件类里注入Router，手动调用跳转方法测试：

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

constructor(private router: Router) {}

// 比如在按钮点击事件里调用
navigateToResult() {
  this.router.navigate(['/CostofOwnership/ownership-result', this.cons.name]);
}

如果手动跳转能得到正确的URL，那说明模板里的cons对象可能有问题（比如未初始化、name属性不存在），导致传递了undefined，进而触发了异常路由。

5. 检查路由守卫或拦截器 #

如果你的应用里有路由守卫（比如CanActivate）或者HTTP拦截器，可能会在路由跳转时修改URL，导致参数被转成查询参数。可以暂时禁用这些守卫/拦截器，测试是否能正常跳转，来排除这个可能性。

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