Angular 5页面刷新总是跳转首页，如何保持当前页面？

看起来你遇到的是Angular单页应用（SPA）常见的路由刷新问题，结合你的描述，我整理了几个大概率的原因和对应的解决方法，一步步来排查：

1. 先检查你的路由配置 #

首先确认路由的定义顺序和结构是否正确，这是最容易踩坑的点：

• 通配符路由必须放在最后：不管page-not-found是作为HomeComponent的子路由还是根路由，{ path: '**', ... }一定要放在所有路由的最末尾，否则会提前匹配覆盖其他路由，导致刷新时路由解析异常。
• 避免不必要的redirectTo：检查你的根路由或HomeComponent的子路由里，有没有类似{ path: '', redirectTo: 'app-home', pathMatch: 'full' }的配置——如果有，当刷新时如果URL路径匹配到空路由分支，就会自动跳转到app-home。如果只是希望默认进入app-home，这个配置没问题，但要确保pathMatch: 'full'只匹配完全为空的路径，不会影响子路由的解析。

给你一个正确的路由配置示例参考：

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { 
        path: 'app-home', 
        component: AppHomeComponent, 
        resolve: { apphome: AppHomeResolve } 
      },
      { path: 'getEmp-by-id/:id', component: GetEmpByIdComponent },
      // 子路由里的通配符放在最后
      { path: '**', component: PageNotFoundComponent }
    ]
  }
];

2. 排查组件初始化时的自动导航 #

检查HomeComponent、AppHomeComponent或者你目标页面的组件（比如GetEmpByIdComponent）的ngOnInit钩子，有没有不小心写了自动跳转到app-home的代码，比如：

// 错误示例：会导致组件初始化就跳转
ngOnInit() {
  this.router.navigate(['/app-home']);
}

如果有这类代码，要么直接移除，要么加上条件判断（比如只有首次进入应用时才跳转）。

3. 服务器端配置（生产环境必做） #

Angular是客户端路由，刷新页面时浏览器会向服务器请求当前URL的资源，如果服务器没有配置，会返回404页面，很多情况下服务器会把404重定向到首页，最终导致Angular加载后跳转到app-home。你需要配置服务器让所有请求都返回index.html，这样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]
  

• IIS：配置web.config：

  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

按照上面的步骤排查后，刷新页面应该就能停留在当前路由了。

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