如何实现Clean URL重定向？解决JS自动补全搜索栏路径错误问题

这个问题我之前处理过，本质是相对路径跳转导致的路径拼接错误：当你处于/news子路径下时，浏览器会把相对路径products/1自动拼接成/news/products/1，而我们需要强制从网站根目录开始跳转。

最简单的解决方案：始终使用绝对路径 #

不管当前处于哪个子路径，直接以/开头构造跳转路径，就能确保跳转到根目录下的目标地址：

// 假设你从搜索结果中获取到的目标路径是类似 'products/1' 的值
const targetPath = 'products/1'; // 替换成你实际的目标路径变量

// 直接构造根路径开头的绝对路径
window.location.href = `/${targetPath}`;

这样不管你在/foo还是/news路径下，最终都会跳转到www.example.com/products/1，完全避免路径嵌套的问题。

更严谨的写法（推荐） #

如果需要确保域名的正确性（比如多环境部署场景），可以用window.location.origin拼接完整URL：

const targetPath = 'products/1';
// 拼接完整的绝对URL：域名 + 目标路径
const fullRedirectUrl = `${window.location.origin}/${targetPath}`;
window.location.href = fullRedirectUrl;

window.location.origin会自动返回当前页面的根域名（比如https://www.example.com），这样即使域名变更，代码也不需要修改，兼容性更好。

针对你现有代码的调整 #

如果你想保留原有的路径判断逻辑，也可以这样修改：

const targetPath = 'products/1'; // 你的目标路径
let redirectUrl;

if (window.location.pathname.split("/")[1] === "news") {
  // 在news路径下，强制使用根路径开头的绝对路径
  redirectUrl = `/${targetPath}`;
} else {
  // 其他路径下也建议用绝对路径，保持逻辑统一
  redirectUrl = `/${targetPath}`;
}

window.location.href = redirectUrl;

其实这里的判断已经没必要了，因为不管是否在news路径下，用绝对路径都能解决问题，所以更推荐直接使用前面两种通用方案。

内容的提问来源于stack exchange，提问作者Ali Özen