Angular如何配置路由：查询参数变更复用组件、路径参数变更重渲染

可以在应用层面配置实现该需求，Angular 12 原生支持相关路由配置，操作方案如下：

配置步骤 #

1. 修改RouterModule.forRoot全局配置
   新增onSameUrlNavigation: 'reload'参数，开启同路由定义下的导航重载能力，修改后的配置如下：

RouterModule.forRoot(routes, {
  relativeLinkResolution: 'legacy',
  onSameUrlNavigation: 'reload'
})

2. 全局统一配置路由触发规则
   你可以通过递归遍历路由配置，给所有路由自动添加runGuardsAndResolvers: 'paramsChange'规则，该规则会指定仅当路由路径参数（如:id）变化时才重新触发路由生命周期、渲染组件，查询参数（?后携带的参数）变化时不会触发重载。
   完整的路由配置处理示例：

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

// 递归给所有路由添加触发规则
function processRoutes(routes: Routes): Routes {
  return routes.map(route => {
    const newRoute = {
      ...route,
      runGuardsAndResolvers: 'paramsChange'
    };
    if (newRoute.children) {
      newRoute.children = processRoutes(newRoute.children);
    }
    return newRoute;
  });
}

// 原始路由配置，保持你原本的定义即可
const rawRoutes: Routes = [
  { path: 'users', component: UserListComponent },
  { path: 'users/:id', component: UserViewComponent },
  // 其他路由...
];

// 处理后的路由传入RouterModule
export const routes = processRoutes(rawRoutes);

效果验证 #

上述配置完成后，路由行为完全符合你的预期：

• 从/users跳转至/users/1或反向跳转：路由路径段发生变化，组件重新渲染
• 从/users/1导航到/users/2：路径参数id变化，组件重新渲染
• 从/users/1?tab=contacts导航到/users/1?tab=accounts：仅查询参数变化，组件不会重新渲染

如果有个别路由需要例外的规则，直接在对应路由的配置项里单独覆盖runGuardsAndResolvers属性即可。

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