无法替换指定URL问题咨询：前端URL替换功能失效排查

原代码的问题在于每次调用window.location.href + "/" + id时，会把当前完整URL（包含之前追加的设备ID）再拼接新ID，导致路径不断叠加（例如http://xxx/device1/device2），无法实现指定URL的替换。

修正方案1：根路径部署场景 #

如果页面部署在域名根路径下，直接替换路径为目标ID即可：

<!DOCTYPE html>
<html>
  <body>
    <button id="device1" onclick="deviceOnOff('device1')">On/Off</button>
    <button id="device2" onclick="deviceOnOff('device2')">On/Off</button>
  </body>
  <script>
    function deviceOnOff(id) {
      // 直接设置路径为 /{id}，替换当前URL
      window.history.replaceState({}, "", `/${id}`);
    }
  </script>
</html>

修正方案2：通用场景（支持子路径部署） #

如果页面部署在子路径下（如http://xxx/app/），使用URL API安全处理路径，避免叠加：

<!DOCTYPE html>
<html>
  <body>
    <button id="device1" onclick="deviceOnOff('device1')">On/Off</button>
    <button id="device2" onclick="deviceOnOff('device2')">On/Off</button>
  </body>
  <script>
    function deviceOnOff(id) {
      const url = new URL(window.location.href);
      const pathParts = url.pathname.split('/').filter(part => part);
      
      // 移除最后一段可能存在的设备ID
      if (pathParts.length > 0 && ['device1', 'device2'].includes(pathParts.at(-1))) {
        pathParts.pop();
      }
      
      // 添加新设备ID并更新路径
      pathParts.push(id);
      url.pathname = '/' + pathParts.join('/');
      
      window.history.replaceState({}, "", url.toString());
    }
  </script>
</html>

说明 #

• 方案1适用于页面直接部署在域名根目录的情况，逻辑简单直接。
• 方案2通过URL对象解析路径，能适配子路径场景，确保每次替换都是在基础路径后设置设备ID，不会出现叠加问题。

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