Angular 14页面刷新后停留在当前组件的配置问题

首先明确：onSameUrlNavigation: 'reload' 只作用于Angular应用内部导航到当前已激活URL的场景，完全不影响浏览器刷新的行为，所以你添加这个配置无效是正常的。

要实现刷新时停留在当前组件并触发ngOnInit()，按以下步骤处理：

1. 简化路由配置，避免匹配冲突 #

你当前的路由里重复定义了三个指向HomeComponent的路径，可能导致路由匹配逻辑混乱，建议简化成：

const routes: Routes = [
  // 根路径重定向到ROUTE_BASE，确保唯一入口
  { path: '', redirectTo: URLS.ROUTE_BASE, pathMatch: 'full' },
  { path: URLS.ROUTE_BASE, component: HomeComponent },
  // Angular路由默认会自动处理URL末尾的斜杠，不需要单独配置
  { path: URLS.COMPONENT_ONE, component: ComponentOne },
  { path: URLS.COMPONENT_TWO, component: ComponentTwo },
  // 可选：添加通配符路由，处理未知路径
  { path: '**', redirectTo: URLS.ROUTE_BASE }
];

注：你代码里的COMPOMENT_ONE存在拼写错误，修正为COMPONENT_ONE避免路由匹配失败

2. 配置服务器支持SPA路由（核心步骤） #

Angular是单页应用，刷新页面时浏览器会直接向服务器请求当前URL（比如/component-one），如果服务器没有配置SPA fallback，会返回404或默认跳转到根路径（也就是首页）。这是刷新跳转的根本原因：

• 开发环境：用ng serve启动的开发服务器已经默认配置了fallback，刷新应该不会跳转。如果仍跳转，检查你的路由常量URLS是否正确。
• 生产环境：需要在服务器配置中添加fallback规则，让所有非静态文件的请求都指向index.html：
  • Nginx：在配置文件中添加

    location / {
      try_files $uri $uri/ /index.html;
    }
    

  • Apache：在.htaccess中添加

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    

  • IIS：配置URL重写规则，将所有请求重定向到index.html

3. 关于ngOnInit()触发 #

当服务器配置正确后，刷新页面时Angular会重新初始化当前路由对应的组件，ngOnInit()方法会自动触发，不需要额外配置。如果是组件内路由参数变化需要重新初始化，可以结合ActivatedRoute的参数订阅，但刷新场景下默认就会重新加载组件。

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