如何用JavaScript实现多语言切换时URL路径的添加与移除？

核心思路 #

要实现动态修改URL路径的语言切换，需要：

1. 解析当前URL的路径部分，判断是否已包含语言前缀
2. 根据目标语言（如英语/法语）调整路径：
   • 选择英语时，移除已有的语言前缀（如果存在）
   • 选择其他语言时，替换或添加对应的语言前缀
3. 保留URL中的查询参数和锚点（如?sort=price或#top）

完整代码实现 #

首先，修改语言选择按钮的调用方式，传入目标语言代码：

<!-- 示例：语言选择按钮 -->
<button onclick="changeLanguage('fr')">法语</button>
<button onclick="changeLanguage('en')">英语</button>

然后添加JavaScript函数：

function changeLanguage(targetLang) {
  // 定义支持的语言列表，可根据需求扩展
  const supportedLangs = ['en', 'fr'];
  const currentPath = window.location.pathname;
  // 拆分路径为片段，过滤空字符串（处理根路径/的情况）
  let pathSegments = currentPath.split('/').filter(seg => seg !== '');
  
  // 判断当前路径是否已包含语言前缀
  const hasLangPrefix = supportedLangs.includes(pathSegments[0]);

  let newPathSegments = [];

  if (targetLang === 'en') {
    // 处理英语：移除语言前缀（如果存在）
    if (hasLangPrefix) {
      newPathSegments = pathSegments.slice(1);
    } else {
      // 已是英语页面，直接重载
      window.location.reload();
      return;
    }
  } else {
    // 处理其他语言
    if (hasLangPrefix) {
      if (pathSegments[0] === targetLang) {
        // 已是目标语言页面，直接重载
        window.location.reload();
        return;
      } else {
        // 替换现有语言前缀
        newPathSegments = [targetLang, ...pathSegments.slice(1)];
      }
    } else {
      // 为路径添加目标语言前缀
      newPathSegments = [targetLang, ...pathSegments];
    }
  }

  // 构建新路径
  const newPath = '/' + newPathSegments.join('/');
  // 拼接完整URL：保留域名、查询参数和锚点
  const newURL = window.location.origin + newPath + window.location.search + window.location.hash;

  // 跳转到新URL
  window.location.href = newURL;
}

代码解释 #

• supportedLangs：维护支持的语言代码列表，方便后续扩展
• 路径拆分与过滤：将路径拆分为片段，避免空字符串干扰判断
• 语言前缀判断：检查路径首段是否为支持的语言代码
• 分支处理：
  • 英语：移除前缀或直接重载
  • 其他语言：替换原有前缀或添加新前缀
• 完整URL构建：保留查询参数和锚点，确保页面状态不丢失

原代码问题分析 #

你的原代码直接用/fr替换整个当前路径，导致无论当前页面是什么，都会跳转到/fr，而正确的做法应该是在现有路径基础上添加/替换语言前缀，而非完全覆盖。

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