Angular Router问题：带查询参数重定向时无法匹配路由

我之前也碰到过类似的场景，带查询参数的页面被守卫重定向到登录页后，跳转回来就报路由匹配失败，大概率是returnUrl的处理逻辑有问题，咱们一步步来排查和解决：

1. 检查守卫中returnUrl的获取逻辑 #

首先要确保在AccessibilityGuard的canActivate方法里，你捕获的是完整的当前URL（包含查询参数），而不是只截取路径部分。错误的写法可能只拿了route.url，但正确的应该用state.url，它会包含路径和所有查询参数：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  if (!this.authService.hasAccessToken()) {
    // 保存完整的当前页面URL作为returnUrl
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
  return true;
}

这里state.url的值就是你访问的/info/xpto/graphic?a=1&b=2&c=3，而不是单纯的/info/xpto/graphic。

2. 登录成功后的跳转方式要选对 #

登录组件处理跳转时，别用router.navigate()，因为它需要拆分路径和查询参数，容易出错。改用router.navigateByUrl()，它能直接识别完整的带参数URL字符串：

login() {
  this.authService.login(this.loginForm.value).subscribe(
    () => {
      // 从查询参数中取出returnUrl，默认跳转到首页
      const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
      // 用navigateByUrl直接跳转完整URL
      this.router.navigateByUrl(returnUrl);
    },
    error => {
      // 处理登录错误
    }
  );
}

3. 验证路由配置是否正确 #

最后确认一下你的路由配置，确保XptoGraphicComponent的路由路径和访问的URL完全匹配，没拼写错误：

const appRoutes: Routes = [
  // 其他路由
  {
    path: 'info/xpto/graphic',
    component: XptoGraphicComponent,
    canActivate: [AccessibilityGuard] // 确保守卫正确绑定
  },
  { path: 'login', component: LoginComponent }
];

额外注意：特殊字符的编码问题 #

如果你的查询参数里有特殊字符（比如&、=之外的符号），可以给returnUrl做编码和解码处理，避免解析异常：

• 守卫里编码：encodeURIComponent(state.url)
• 登录组件里解码：decodeURIComponent(returnUrl)

按这个流程调整后，应该就能解决重定向后路由匹配失败的问题了。

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