背景
在使用 Angular 开发前端页面时，经常需要通过路由传递参数来实现不同页面之间的数据传递。我们可以通过在 routerLink 中添加参数来进行路由跳转，如下所示：
<a [routerLink]="['/user', userId]">用户详情</a>
在实际应用中，我们可能会遇到这样的场景：用户在一个页面上进行了某些操作，然后跳转到另一个页面，并传递了相同的参数，但是页面却没有刷新，导致数据没有更新。这是因为 Angular 默认情况下会缓存已经加载过的组件，如果参数没有发生变化，就不会重新加载组件。
解决方案
1. 使用 ActivatedRoute
Angular 提供了 ActivatedRoute 来获取当前路由信息，我们可以在组件中订阅 ActivatedRoute，然后在路由参数发生变化时刷新组件。示例如下：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
----- ------------- ---------- ------ -
------- -------
------------------- ------ --------------- --
---------- -
---------------------------------- -- -
----------- - -------------
-- --------------
---
-
-2. 在路由配置中添加 runGuardsAndResolvers 属性
在路由配置中，我们可以添加 runGuardsAndResolvers 属性来指定在路由参数发生变化时是否重新加载组件。将其设为 'always'，即可在参数不同时重新加载组件。示例如下：
const routes: Routes = [
{ path: 'user/:id', component: UserComponent, runGuardsAndResolvers: 'always' },
];3. 使用路由导航器手动导航
如果以上两种方案无法满足需要，我们可以通过路由导航器手动进行跳转，并指定 NavigationExtras 中的 skipLocationChange 属性为 false，以强制刷新页面。示例如下：
-- -------------------- ---- -------
------ - ------- ---------------- - ---- ------------------
----- ------------- -
------- -------
------------------- ------- ------- --
---------------------- ------- -
----- ------- ---------------- - - ------------------- ----- --
------------------------------ -------- --------
-
-总结
在使用 Angular 进行前端开发时，路由参数的传递是一个常见的需求，但是在参数相同时页面不刷新的问题也可能让人头疼。在本文中，我们介绍了三种解决方案：使用 ActivatedRoute、在路由配置中添加 runGuardsAndResolvers 属性以及手动使用路由导航器进行跳转。通过掌握这些方法，我们可以更加灵活地应对不同的场景，解决 Angular 相同路由参数不刷新页面的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64673e50968c7c53b079f476