Angular 11中router.navigateByUrl不再支持queryParams参数，如何实现原有功能？

这个问题我之前碰到过，Angular 11 开始对 navigateByUrl() 的参数做了严格限制——它本来就是用来直接导航到完整URL字符串的方法，不再支持自动拼接 queryParams 配置项了。给你两种和原有代码功能完全一致的解决办法：

方法一：改用 router.navigate()（推荐） #

navigate() 是 Angular 路由更常用的导航方法，完全支持 queryParams 参数，写法和你原来的逻辑几乎一致，只需要把目标URL改成数组形式：

// 把 targetUrl 放进数组中，比如 targetUrl 是 '/user/profile' 的话
this.router.navigate([targetUrl], { queryParams: { token: accessToken } });

如果你的 targetUrl 是绝对路径（带 /），直接放进数组就行；如果是相对路径，它会基于当前路由自动拼接，非常省心。

方法二：手动拼接参数到 URL（坚持用 navigateByUrl 的话） #

如果你一定要用 navigateByUrl()，可以手动把查询参数拼接到目标URL字符串里，推荐用 HttpParams 来构建参数，避免手动拼接时的格式错误：

import { HttpParams } from '@angular/common/http';

// 1. 构建查询参数
const queryParams = new HttpParams().set('token', accessToken);
// 2. 拼接完整URL（自动处理已有参数的情况）
const fullTargetUrl = targetUrl.includes('?') 
  ? `${targetUrl}&${queryParams.toString()}` 
  : `${targetUrl}?${queryParams.toString()}`;
// 3. 执行导航
this.router.navigateByUrl(fullTargetUrl);

这种方法适合那些必须用完整URL导航的场景，但不如第一种方法简洁。

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