版本：Angular11

• 第一种方式

首先在app-routing文件下设置RouterModule在点击相同的路由下能触发路由事件

@NgModule({imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],exports: [RouterModule]
})
export class AppRoutingModule {
}

然后再去需要刷新的页面获取路由触发事件，在路由导航成功结束以后再去调用获取数据的方法

export class PersonnelComponent implements OnInit, OnDestroy {subscription: Subscription;constructor(private router: Router) {this.subscription = this.router.events.pipe(// 过滤出NavigationEnd事件即可 次事件为路由导航成功结束触发的事件filter((event: RouterEvent) => event instanceof NavigationEnd),// 跳过第一次加载 第一次会执行this.getList()方法，再执行就会发送两次请求skip(1)).subscribe(// getList()获取页面数据的方法() => this.getList())}ngOnInit(): void {this.getList();}ngOnDestroy(): void {// 就算组件被销毁了 路由订阅事件还是一直有用的 要记得手动取消订阅this.subscription.unsubscribe();}
}

• 第二种方式
  这种方式必须在设置了resolve守卫的情况下才能生效
  首先还是在app-routing文件下设置 onSameUrlNavigation: 'reload'属性
  然后在对应的子路由文件下设置runGuardsAndResolvers: 'always'
  但是此方法会在第一次加载的时候发送两次数据请求

const routes: Routes = [{path: '',component: ShiftComponent,resolve: {'shiftData': ShiftResolve},runGuardsAndResolvers: 'always'}
];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class ShiftRoutingModule { }

• 第三种方式

在路由跳转的时候直接在ts文件中手动跳转，并附带一个刷新参数

<div class="drawer-item" routerLinkActive="selected" (click)="redirectTo('/admin/personnel')" [routerLink]="['/admin/personnel']">带参数实现刷新</div>

手动跳转

this.router.navigate([url], {queryParams: { 'time': Date.now() }
});

然后在跳转的页面获取刷新参数的订阅中获取数据

ngOnInit(): void {this.activatedRoute.queryParamMap.pipe(skip(1)).subscribe(() => {this.getList();});this.getList();}