Angular路由模块中使用redirectTo重定向时如何保留查询参数？

嘿，这个问题我之前做项目的时候也踩过坑！Angular默认的redirectTo重定向逻辑是不会自动携带查询参数的，不过只要在路由配置里加个小配置就能轻松解决～

问题根源 #

你当前的路由配置只指定了重定向的目标路径，但没有告诉Angular要保留原路径的查询参数，所以跳转后参数就丢失了。

解决方法 #

只需要在重定向的路由规则里添加preserveQueryParams: true（Angular全版本支持），或者Angular 7+版本也可以用queryParamsHandling: 'preserve'，两种方式都能实现参数保留的效果。

方案1：使用preserveQueryParams（兼容所有Angular版本）

修改你的路由配置如下：

{
  path: 'views',
  pathMatch: 'prefix',
  children: [
    {
      path: 'createNewFoo',
      redirectTo: '/foo/create',
      preserveQueryParams: true // 关键配置：保留查询参数
    }
    // 其他子路由...
  ]
}

方案2：使用queryParamsHandling（Angular 7+推荐）

如果你的项目用的是Angular 7及以上版本，也可以用更灵活的queryParamsHandling配置：

{
  path: 'views',
  pathMatch: 'prefix',
  children: [
    {
      path: 'createNewFoo',
      redirectTo: '/foo/create',
      queryParamsHandling: 'preserve' // 同样实现参数保留
    }
    // 其他子路由...
  ]
}

效果验证 #

修改完成后，再访问/views/createNewFoo?type=a&date=2024-01-01，就会正确跳转到/foo/create?type=a&date=2024-01-01，查询参数完全保留啦！

另外如果你的场景需要保留URL中的片段（比如#section1这类锚点），可以再加上preserveFragment: true配置，就能连锚点一起带过去咯。

备注：内容来源于stack exchange，提问作者times29