
Vue Router 本身不内置多语言路由前缀功能,但可以通过 动态路由配置 + 路由守卫 + i18n 集成 实现干净、可维护的多语言路径前缀(如 /zh/home、/en/about)。核心不是“拼接字符串”,而是让路由系统感知语言上下文,并据此匹配和生成路径。
语言前缀作为一级动态参数处理
把语言代码(zh、en)设计为路径第一段,统一用动态参数 :lang 捕获:
- 定义路由时,所有带语言前缀的路径都以
/:lang开头,例如:{ path: '/:lang/home', name: 'Home', component: Home }{ path: '/:lang/about', name: 'About', component: About } - 确保
:lang值受控:在路由守卫中校验是否为合法语言码(如['zh', 'en', 'ja']),非法则重定向到默认语言或 404 - 避免通配符泛匹配:不要写
/:lang(.*)*,容易干扰嵌套路由和导航逻辑
路由跳转时自动注入当前语言
不手动拼接 /zh/xxx,而是通过 router.push 的命名路由 + params 自动补全:
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 声明路由时指定
name,并让:lang成为必传参数:{ name: 'Home', path: '/:lang/home', component: Home, props: true } - 跳转时只关心业务目标,语言由全局状态决定:
router.push({ name: 'Home', params: { lang: $i18n.locale } }) - 组件内通过
props或useRoute().params.lang获取当前语言,用于文案、API 请求头等
默认语言路径免前缀(SEO 友好)
用户访问 /home 应自动识别为默认语言(如 zh),但 URL 不显式显示 /zh。实现方式有两种:
立即学习“前端免费学习笔记(深入)”;
-
方案一(推荐):双路由配置
为默认语言单独配置无前缀路由:{ path: '/home', redirect: { name: 'Home', params: { lang: 'zh' } } }
同时保留带前缀的原始路由,由守卫控制实际渲染逻辑 -
方案二:使用 beforeEach 守卫拦截
检测to.path是否不含:lang段,且非静态资源路径(如/login、/api),则自动补全并next({ ...to, params: { lang: defaultLang } })
静态资源与国际化路由分离
登录页、错误页、后台管理页等无需多语言的页面,应使用固定路径(如 /login、/admin),并排除在语言前缀逻辑之外:
- 这些路由 不包含
:lang,也不参与语言切换逻辑 - 在路由表中明确归类,例如加
meta: { i18n: false }标记,便于守卫快速识别 - 避免将
/login写成/:lang/login,否则用户切语言时可能意外跳转到/en/login(该页未必存在英文版)


















