Angular v12点击同一路由菜单无响应无法触发页面刷新如何解决

问题原因 #

Angular 路由默认会忽略相同URL的导航请求，所以你重复点击同一路由的导航时，不会触发任何路由事件，NavigationStart 自然也不会执行。

解决方案 #

方案1：全局开启同路由导航触发（推荐） #

1. 首先修改 app-routing.module.ts 中 RouterModule.forRoot 的配置，开启同URL导航重载开关：

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {
    onSameUrlNavigation: 'reload' // 开启同路由导航触发
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 此时重复点击同路由会触发路由事件，但默认不会重新初始化组件，你可以在目标页面组件中监听路由事件，触发数据刷新逻辑：

// UserComponent 示例代码
constructor(private router: Router, private route: ActivatedRoute) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd && event.url === '/users') {
      // 执行你的页面数据重置、刷新逻辑
      this.loadDefaultData();
    }
  })
}

如果需要完全重新加载组件，可以给对应路由配置 runGuardsAndResolvers: 'always'：

const appRoutes: Routes = [
  {path: "", component: HomeComponent},
  {
    path: "users", 
    loadChildren: ()=> UsersModule,
    runGuardsAndResolvers: 'always' // 每次导航都执行路由守卫和解析器
  },
]

方案2：自定义导航点击事件 #

不用默认的 routerLink 绑定，自己给导航菜单绑定点击事件，手动处理同路由的刷新逻辑：

// 导航组件新增点击处理方法
onMenuClick(menuPath: string) {
  if (this.router.url === menuPath) {
    // 已经在当前路由，直接触发刷新逻辑
    // 可以通过服务通信、事件总线等方式通知目标页面刷新
    this.userRefreshService.refresh.next(true);
    // 或者强制导航（添加随机参数触发路由变化）
    this.router.navigate([menuPath], {
      queryParams: { t: Date.now() },
      queryParamsHandling: 'merge'
    })
  } else {
    this.router.navigate([menuPath]);
  }
}

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