Angular中window.location.reload()仅刷新首页不刷新跳转页如何解决

问题根源 #

你之前的两种实现逻辑都会出现异常，核心原因如下：

• this.router.navigate返回的Promise resolve仅代表Angular路由框架接收了跳转请求，此时页面还未完成到菜单页的切换，回调里执行window.location.reload()会直接重载当前停留的首页，重载结束后才会执行剩余的跳转逻辑，最终菜单页不会被刷新。
• 第二种写法里location.assign的参数没有正确拼接locationId变量，且同样在路由跳转未完成时触发，额外多了一次首页跳转的冗余流程。

可行解决方案 #

方案1：优先使用Angular原生路由重载（无全页刷新，体验最优） #

仅需要刷新菜单页数据的场景优先选这个方案，不需要触发浏览器全页重载：

1. 首先在项目根路由配置中开启同路由重载开关：

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

2. 跳转时携带随机查询参数强制触发菜单组件的初始化逻辑：

this.router.navigate([`locations/${locationId}/menu`], {
  queryParams: { refresh: Date.now() }
})

3. 在菜单页组件内监听参数变更，执行你需要的刷新逻辑即可。

方案2：直接调用浏览器跳转实现全页刷新 #

如果必须要触发浏览器全页重载（比如需要重新加载全局资源、重置全局状态），直接调用location.assign即可，不需要先执行Angular路由跳转：

location.assign(`/locations/${locationId}/menu`);

浏览器会自动跳转到目标地址并加载全新的页面资源。

方案3：监听路由完成事件后再刷新 #

如果必须先走Angular路由跳转逻辑，再触发全页刷新，可以监听路由的NavigationEnd事件确认跳转完成后再执行刷新：

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

// 先订阅路由完成事件
const navEndSub = this.router.events.pipe(
  filter(event => event instanceof NavigationEnd && event.url.includes(`locations/${locationId}/menu`))
).subscribe(() => {
  window.location.reload();
  navEndSub.unsubscribe(); // 及时取消订阅避免内存泄漏
});

// 再执行路由跳转
this.router.navigate([`locations/${locationId}/menu`]);

内容的提问来源于stack exchange，提问作者Ramya Ramesh Kumar