Vue Router 路由管理如何实现动态多语言路由的国际化前缀匹配

Vue Router 实现动态多语言路由前缀匹配，核心是将语言标识（如 zh、en、ja）作为路径第一段动态参数，配合重定向、全局前置守卫与 i18n 状态联动，确保 URL 前缀与应用语言实时同步。

Vue Router 实现动态多语言路由前缀匹配，核心在于将语言标识（如 zh、en、ja）作为路径第一段动态参数，并配合路由重定向、全局守卫与 i18n 状态联动，确保 URL 前缀与应用语言实时同步。

定义带语言前缀的动态路由结构

所有页面路由都嵌套在 /:locale 下，且为可选（支持根路径自动跳转），例如：

1. / → 自动重定向到默认语言路径（如 /zh）
2. /zh/user/123、/en/user/123、/ja/user/123 都复用同一 User 组件
3. 路由配置需声明 path: '/:locale/user/:id'，并设置 props: true 或在组件内解构 $route.params

统一处理 locale 参数与 i18n 实例同步

在路由守卫中读取 to.params.locale，验证是否为合法语言码，然后切换 i18n 实例的 locale 值：

1. 使用 beforeEach 全局前置守卫拦截每次导航
2. 若 to.params.locale 不在支持列表中（如 ['zh', 'en', 'ja', 'fr']），重定向到默认语言或 404
3. 调用 i18n.locale.value = to.params.locale（Vue 3 Composition API）或 i18n.locale = ...（Options API）
4. 避免硬编码：把支持语言列表抽成常量，便于后续增删

支持无前缀访问并自动跳转

用户访问 /user/123 时，应根据浏览器语言或 localStorage 缓存，跳转到对应语言前缀路径：

1. 添加一条 { path: '/:pathMatch(.*)*', redirect: to => { /* 根据环境推导 locale */ } } 通配规则
2. 或单独配置 { path: '/', redirect: { name: 'Home', params: { locale: detectedLocale } } }
3. 推荐用 navigator.language + fallback 到 localStorage 中存储的上次选择

生成多语言链接与面包屑

不依赖静态 <router-link>，而是用计算属性动态构造带当前 locale 的目标路径：

1. 封装 localePath(to) 工具函数：接收原始路由对象（如 { name: 'User', params: { id: 123 } }），自动注入 params.locale
2. 在 <router-link :to="localePath(...)"> 中调用
3. 面包屑菜单也基于当前 $route 动态提取层级，并替换其中的 locale 段为对应语言文案