Angular 14如何自动在路由路径中添加语言前缀

要实现访问旧链接（如/home）时自动添加默认语言前缀（变为/en/home），你需要调整路由配置，添加专门处理无语言前缀路径的规则，同时优化原有路由的重定向逻辑：

调整后的路由配置 #

const routes = [
  // 处理不带语言前缀的旧链接，自动补全默认语言
  {
    path: "/*",
    redirect: (to) => {
      // 定义你的有效语言列表
      const validLangs = ['en', 'zh'];
      const pathSegments = to.path.split('/');
      // 检查路径第一个分段是否为有效语言
      const hasValidLangPrefix = validLangs.includes(pathSegments[1]);
      
      // 如果已有有效语言前缀，直接返回原路径；否则添加默认语言前缀
      return hasValidLangPrefix ? to.path : `/en${to.path}`;
    }
  },
  // 带语言前缀的核心路由
  {
    path: ":lang",
    resolve: {
      language: isValidLanguage
    },
    children: [
      {
        path: "dashboard",
        component: Dashboard
      },
      {
        path: "home",
        component: Home
      },
      {
        path: "**",
        // 重定向到当前语言下的dashboard，而非固定默认语言
        redirectTo: (to) => `/${to.params.lang}/dashboard`,
        pathMatch: "prefix"
      }
    ]
  }
];

优化语言验证函数（isValidLanguage） #

确保当用户输入无效语言前缀时，也能重定向到默认语言的对应路径：

function isValidLanguage(route) {
  const validLangs = ['en', 'zh'];
  const currentLang = route.params.lang;
  
  if (!validLangs.includes(currentLang)) {
    // 移除无效语言前缀，拼接默认语言路径
    const targetPath = route.path.replace(`/${currentLang}`, '');
    return `/en${targetPath}`;
  }
  
  return currentLang;
}

逻辑说明 #

1. 外层通配符路由：优先捕获所有请求，判断路径是否已有有效语言前缀。如果没有，自动拼接/en前缀后重定向，比如/home会变为/en/home，/about会变为/en/about。
2. 核心路由重定向优化：原有通配符路由不再固定重定向到/en/dashboard，而是根据当前语言参数动态生成重定向路径，保证语言一致性。
3. 无效语言处理：通过验证函数拦截无效语言前缀，自动替换为默认语言，比如/fr/home会被重定向到/en/home。

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