在IIS中配置URL重写规则移除哈希适配Angular应用

要实现旧哈希路由URL到新非哈希URL的跳转，需要结合IIS重写规则和客户端脚本——因为浏览器不会把URL中#后的内容发送给服务器，单纯靠IIS规则无法直接捕获这部分信息。

步骤1：配置IIS重写规则（web.config） #

先确保Angular应用在IIS上的基础重写配置（支持非哈希路由），这是实现跳转的前提：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 基础规则：所有非文件/目录请求指向index.html，支持非哈希路由 -->
        <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>

步骤2：添加客户端跳转脚本 #

在Angular应用的index.html的<head>标签内添加以下脚本，用于检测并处理URL中的哈希部分：

<script>
  // 检测是否是旧哈希路由格式
  if (window.location.hash.startsWith('#/Home')) {
    // 提取哈希中的查询参数（如?id=1）
    const hashParams = window.location.hash.split('?')[1] || '';
    // 构造新URL并跳转（replace避免在历史记录中留下旧链接）
    const newUrl = window.location.origin + '/?' + hashParams;
    window.location.replace(newUrl);
  }
</script>

扩展处理（多旧路由场景） #

如果有多个旧哈希路由需要适配（比如#/About、#/Contact），可以扩展脚本逻辑：

const hashPath = window.location.hash.slice(2); // 去除开头的#/
const [oldPath, params] = hashPath.split('?');

// 旧路径到新路径的映射
const pathMap = {
  'Home': '',
  'About': 'about',
  'Contact': 'contact'
};

const newPath = pathMap[oldPath] || '';
const newUrl = window.location.origin + '/' + newPath + (params ? '?' + params : '');
window.location.replace(newUrl);

如果希望跳转后保留旧链接的历史记录，可将window.location.replace替换为window.location.href。

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