如何实现Web应用路由URI的本地化？

1. 基于语言前缀的路由映射 #

这是最直观的方案，给不同语言版本的路由添加语言前缀，同时将本地化URI映射到同一个业务处理逻辑。

比如在Node.js的Express框架中，可以直接配置多组路由：

// 英文路由
app.get('/en/register', registerController);
// 法文路由
app.get('/fr/enregistrer', registerController);

如果路由较多，可维护一个路由映射表，结合路由参数简化配置：

// 路由映射表
const routeMap = {
  "en": { "register": "/register" },
  "fr": { "register": "/enregistrer" }
};

app.get('/:lang/:localizedRoute', (req, res) => {
  const { lang, localizedRoute } = req.params;
  // 匹配内部统一路由
  const internalRoute = Object.keys(routeMap[lang]).find(key => routeMap[lang][key] === `/${localizedRoute}`);
  if (internalRoute === 'register') {
    registerController(req, res);
  }
  // 其他路由逻辑...
});

2. 中间件自动解析路由映射 #

通过中间件识别用户语言偏好（可从URL前缀、Cookie、请求头Accept-Language获取），将本地化URI转换为内部统一的路由路径，再传递给业务逻辑处理。

示例中间件逻辑：

app.use((req, res, next) => {
  // 优先从URL前缀取语言，没有则用请求头
  const lang = req.path.split('/')[1] || req.headers['accept-language']?.split(',')[0] || 'en';
  const localizedToInternal = {
    'fr': { '/enregistrer': '/register' }
  };

  // 替换请求URI为内部统一路径
  if (localizedToInternal[lang] && localizedToInternal[lang][req.path]) {
    req.url = localizedToInternal[lang][req.path];
  }
  next();
});

// 内部统一处理/register路由
app.get('/register', registerController);

3. 单页应用（SPA）前端路由本地化 #

对于Vue、React这类SPA，可通过路由配置文件维护不同语言的URI，或动态生成对应语言的路由规则。

以Vue Router为例：

// 维护多语言路由配置
const langRouteConfig = {
  en: [{ path: '/register', component: Register }],
  fr: [{ path: '/enregistrer', component: Register }]
};

// 根据当前语言动态生成路由
const currentLang = localStorage.getItem('app-lang') || 'en';
const router = createRouter({
  history: createWebHistory(),
  routes: langRouteConfig[currentLang]
});

也可以通过路由别名实现：

const routes = [
  {
    path: '/register',
    component: Register,
    alias: localStorage.getItem('app-lang') === 'fr' ? '/enregistrer' : ''
  }
];

关键注意事项 #

• 确保所有本地化路由都正确映射到对应业务逻辑，避免出现404错误
• 语言切换时，需同步跳转到对应语言版本的路由（例如从/en/register切换到法语时跳转至/fr/enregistrer）
• 为SEO优化，可给不同语言路由添加hreflang标签，明确标注各版本的语言归属

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