Vue3 i18n多语言项目路由重定向返回undefined问题求助

你遇到的核心问题主要集中在路由初始化时机不匹配、子路由路径配置错误这两个点上，咱们一步步来修复：

1. 根路径重定向返回undefined的原因 #

你的routes.js里根路径的重定向写死了/${i18n.locale}，但路由初始化的时机早于Vue挂载i18n插件，此时i18n.locale还没被正确初始化（甚至是undefined），导致重定向路径变成了/undefined。

修复方案：用动态重定向函数替代静态路径 #

把根路由的重定向改成函数形式，这样能在路由跳转时动态获取合法的默认语言：

// routes.js
export default [
  { 
    path: '/', 
    redirect: () => {
      // 这里可以从本地存储或直接用预设默认值
      const defaultLang = 'en';
      return `/${defaultLang}`;
    } 
  },
  // ... 其他路由
];

2. 子路由路径导致lang参数失效 #

你配置的子路由用了绝对路径（比如/about），这会完全忽略父路由的/:lang前缀，导致路由匹配时无法捕获lang参数，自然触发不了多语言切换逻辑。

修复方案：子路由使用相对路径 #

去掉子路由路径开头的斜杠，让它们继承父路由的/:lang参数：

// routes.js
export default [
  // ... 根路由
  { 
    path: '/:lang', 
    component: { render (c) { return c('router-view') } },
    children: [
      { path: '', name: 'home', component: () => import('../Views/Home.vue') }, // 空路径对应父路由的/:lang
      { path: 'about', name: 'about', component: () => import('../Views/About.vue') },
      { path: 'contact', name: 'contact', component: () => import('../Views/Contact.vue') }
    ]
  }
];

3. 优化路由守卫的lang参数处理 #

当前的beforeEach逻辑可以增加对非法lang参数的判断，避免无效路径：

// /router/index.js
router.beforeEach((to, from, next) => {
  let language = to.params.lang;
  // 定义项目支持的语言列表，防止非法参数
  const supportedLangs = ['en']; // 后续新增语言直接加在这里
  
  if (!language) {
    next('/en');
    return;
  }
  
  if (!supportedLangs.includes(language)) {
    // 非法语言参数重定向到默认语言
    next('/en');
    return;
  }
  
  i18n.locale = language;
  next();
});

4. 确认i18n初始化配置 #

确保你的i18n.js默认locale设置为'en'，避免初始状态下locale为undefined：

// 示例i18n.js配置
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', //  fallback语言
  messages: {
    en
  }
});

export default i18n;

做完这些修改后，你应该能解决：

• 根路径正确重定向到/en
• 手动输入/en/about、/en/contact等路径时，lang参数能被正确捕获，多语言功能生效
• 不再出现undefined的重定向路径

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