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

当前路由配置中，ComponentOne/Two/Three的路由path是独立短路径（如componentOne），而应用基础路径为/myApp/components。用户从首页导航到这些组件时，生成的URL可能是/myApp/components/componentOne（相对导航），但刷新页面时，浏览器请求该URL却匹配不到对应路由规则，最终会 fallback 到空路径对应的HomeComponent，导致跳转到首页。

方案1：使用子路由结构 #

将组件路由作为基础路径的子路由，符合Angular路由最佳实践，URL结构更清晰：

// 移除ROUTE_BASE开头的斜杠，因为路由path不能以/开头
const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: URLS.ROUTE_BASE.replace(/^\//, ''),
    component: HomeComponent,
    children: [
      { path: URLS.COMPONENT_ONE, component: ComponentOne },
      { path: URLS.COMPONENT_TWO, component: ComponentTwo },
      { path: URLS.COMPONENT_THREE, component: ComponentThree }
    ]
  },
  // 通配符路由：处理无效URL，跳转到首页
  { path: '**', redirectTo: '' }
];

同时，在HomeComponent的模板中添加<router-outlet></router-outlet>，子组件会渲染在这个出口中。

方案2：直接给组件路由添加基础路径前缀 #

如果不需要子路由结构，可直接修改组件路由的path，拼接基础路径：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: URLS.ROUTE_BASE.replace(/^\//, ''), component: HomeComponent },
  // 拼接基础路径与组件路径，确保路由匹配正确URL
  { path: `${URLS.ROUTE_BASE.replace(/^\//, '')}/${URLS.COMPONENT_ONE}`, component: ComponentOne },
  { path: `${URLS.ROUTE_BASE.replace(/^\//, '')}/${URLS.COMPONENT_TWO}`, component: ComponentTwo },
  { path: `${URLS.ROUTE_BASE.replace(/^\//, '')}/${URLS.COMPONENT_THREE}`, component: ComponentThree },
  { path: '**', redirectTo: '' }
];

关键补充：服务器配置 #

部署时必须配置服务器，将所有路由请求转发到index.html，否则刷新页面时服务器会返回404，无法触发Angular路由逻辑：

• 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]

只要路由匹配正确，刷新页面时Angular会重新初始化组件，OnInit钩子会自动执行。无需额外配置onSameUrlNavigation——该配置仅针对同一URL的客户端导航，而非浏览器刷新场景。

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