Angular Router导航时URL被编码致路由找不到问题求助

问题分析 #

你遇到的情况是路由导航时?被转成了%3F，导致浏览器把查询参数当成路由路径的一部分，因此匹配不到正确的/bill-read路由。这种问题大多出在路由配置错误或者导航方法使用不当上。

解决步骤 #

1. 检查路由配置 #

首先确认你的路由模块里，/bill-read的配置是独立的，不要把查询参数误设为路由参数：

// app-routing.module.ts 或对应子路由模块
const routes: Routes = [
  // 正确配置：bill-read是独立路径，查询参数无需在路由中定义
  { path: 'bill-read', component: BillReadComponent },
  // 错误示例（会让路由把?后的内容当成param参数的一部分）
  // { path: 'bill-read/:param', component: BillReadComponent },
];

2. 正确使用router.navigate #

你原本的navigate写法本身规范，但要确保this.data?.SerialNumber有有效值，也可以加日志确认参数状态：

console.log(this.data?.SerialNumber); // 确认参数不为空或undefined
this.router.navigate(['/bill-read'], { queryParams: { serialNumber: this.data?.SerialNumber } });

3. 规范使用navigateByUrl #

如果要用navigateByUrl，别直接拼接字符串（容易引发编码问题），建议用createUrlTree生成安全的URL树：

const urlTree = this.router.createUrlTree(['/bill-read'], { 
  queryParams: { serialNumber: this.data?.SerialNumber } 
});
this.router.navigateByUrl(urlTree);

4. 检查LocationStrategy配置 #

如果项目用了HashLocationStrategy（URL带#），要确保配置正确；默认是PathLocationStrategy（不带#），若之前修改过这个配置，需确认无冲突：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { 
      // useHash: true  // 若开启此配置，URL会带#，需确保路由匹配逻辑正确
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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