Angular路由问题：保留原始请求URL根路径的方法咨询

一、Hash模式问题修复（保留http://someip/somefolder/#/route路径） #

1. 明确base href与deploy-url的分工 #

• 构建时同时指定base href（路由基准，指向index.html所在目录）和deploy-url（资源加载路径）：

  ng build --base-href /xyz/fva/ --deploy-url /html/FvaConfig/
  

• 确保index.html中的<base>标签正确：

  <base href="/xyz/fva/">
  

  这样资源会从/html/FvaConfig/加载，但路由的根始终是/xyz/fva/。

2. 修正路由导航逻辑 #

• 移除路由跳转中的相对路径（如../../xya/fva/stage），直接使用基于base href的路由路径：
  比如初始导航改为：

  this.router.navigate(['stage']);
  

  此时URL会保持为https://IP/xyz/fva/#/stage，不会跳转到资源目录。

3. 服务器路径规则调整 #

• 确保服务器接收到/xyz/fva/#/...类请求时，返回/xyz/fva/index.html，而不是错误路由到资源目录。比如Nginx可添加规则：

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

  同时检查拼写错误：你提到的/html/FavfConfig/应为/html/FvaConfig/，拼写失误会导致路径请求错误。

二、非Hash模式问题修复（解决子路由刷新不匹配） #

1. 服务器URL重写配置 #

• 所有非静态资源请求必须重写到/xyz/fva/index.html，让Angular路由接管路径匹配。示例配置：
  • Nginx：

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

  • Apache：

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

2. 修正路由配置 #

• 路由路径是相对于base href的，无需写完整路径xyz/fva/stage，改为：

  const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'stage' },
    {
      path: 'stage',
      component: StageComponent,
      children: [
        { path: 'status', component: StatusComponent, outlet: 'child' }
      ]
    }
  ];
  

• 检查子路由访问路径的拼写：你提到的/xya/fva/stage/(child:status)中的xya应为xyz，拼写错误会直接导致路由匹配失败。

3. 确认base href配置 #

• 构建时指定正确的base href：

  ng build --base-href /xyz/fva/
  

  确保index.html的<base>标签与之一致。

额外注意事项 #

• 测试前清空浏览器缓存，避免旧配置干扰结果。
• 排查所有路径中的拼写失误，这类细节问题常导致路径异常。

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