Angular 4 routerLink：点击当前路由能否重新加载页面？

默认情况下，当你点击和当前URL匹配的routerLink时，Angular是不会重新加载对应组件的——它会复用已经存在的组件实例，这是Angular为了性能优化做的设计。所以直接点击你菜单里的"Users"链接，在当前已经处于/users路由时，页面不会有任何刷新动作。

不过不用怕，我们有几种不用location.reload()（毕竟它会重载整个页面，体验不好）的方法来实现组件级的刷新：

方法一：配置路由的onSameUrlNavigation #

这是比较推荐的优雅方案，步骤如下：

1. 首先在你的路由模块（比如app-routing.module.ts）里修改Router的配置，开启onSameUrlNavigation为'reload'：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload' // 开启同URL导航时的重载行为
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 然后在你的UsersComponent里监听路由的NavigationEnd事件，触发刷新逻辑：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  // 过滤出NavigationEnd事件，每次导航结束（包括同URL导航）都执行刷新
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 这里写你需要执行的刷新操作，比如重新获取用户数据
    this.loadUserList();
  });
}

// 假设这是你加载数据的方法
private loadUserList() {
  // 调用API获取用户列表...
}

这样配置后，点击同路由的routerLink就会触发组件内的刷新逻辑，而且不会修改URL，体验很流畅。

方法二：给routerLink添加随机查询参数 #

这种方法比较简单粗暴，通过给路由添加一个随机的查询参数，让Angular认为是一个新的路由，从而重新初始化组件：

<ul>
  <li><a routerLink="home">Home</a></li>
  <li><a [routerLink]="['users']" [queryParams]="{t: Date.now()}">Users</a></li>
</ul>

每次点击"Users"链接时，URL会带上一个类似?t=1699999999999的参数，Angular会重新创建UsersComponent实例，自然就实现了刷新。缺点是URL会多一个无用的参数，可能影响书签或分享链接。

方法三：手动触发路由导航跳转 #

你也可以通过代码手动先跳转到一个临时路由，再跳转回当前路由，强制组件重新加载：

<ul>
  <li><a routerLink="home">Home</a></li>
  <li><a routerLink="users" (click)="refreshUsers()">Users</a></li>
</ul>

然后在组件里实现refreshUsers方法：

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

constructor(private router: Router) { }

refreshUsers() {
  // 先跳转到根路径（skipLocationChange: true 表示不修改URL）
  this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    // 再跳转回users路由
    this.router.navigate(['users']);
  });
}

这种方法也能实现组件刷新，但代码相对繁琐一点，适合简单场景。

总结一下，优先推荐第一种方法，它既不修改URL，又能精准控制刷新逻辑，是Angular官方推荐的同路由刷新方案。

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