Vue Router如何使用正则匹配带可选语言前缀的路由

原有配置失效原因 #

• 第一种配置path: ':lang/products/shoes/nike'未将lang参数设为可选，强制要求路径必须存在前置语言段，完全无法匹配无前置段的/products/shoes/nike路径。
• 第二种配置path: '/:catchAll(.*)/products/shoes/nike'使用的(.*)规则为贪婪匹配，会跨路径斜杠捕获多段内容，不仅无法正确识别单段语言标识，还会出现路径匹配错位的问题。

Vue Router 支持可选参数+自定义段正则的写法，单条路由即可同时覆盖两类路径匹配需求。

可直接复用的路由配置 #

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      // 核心规则说明：
      // 1. :lang 定义语言参数
      // 2. ([^/]+) 限制参数只能匹配不含斜杠的单个路径段，符合语言标识的格式特征
      // 3. 参数后加? 标记该参数为可选，允许参数段完全不存在
      path: '/:lang([^/]+)?/products/shoes/nike',
      name: 'shoes',
      meta: { allowGuest: true },
      // 替换为实际业务组件即可
      component: () => import('@/views/products/ShoesNike.vue')
    }
  ]
})

匹配效果说明 #

• 访问无前置段路径/products/shoes/nike时，路由正常命中，route.params.lang值为undefined
• 访问带语言前缀路径（如/en/products/shoes/nike、/zh-CN/products/shoes/nike）时，首段语言标识会被正确捕获到lang参数中，不会出现匹配错位

重定向场景适配 #

如果需要将所有带语言前缀的路径统一重定向到无语言前缀的命名路由，可按如下写法调整：

const routes = [
  {
    path: '/:lang([^/]+)?/products/shoes/nike',
    meta: { allowGuest: true },
    redirect: to => {
      // 可按需把lang参数存入全局状态、query或localStorage，不需要保留在最终路径里
      if (to.params.lang) {
        localStorage.setItem('siteLang', to.params.lang)
      }
      return { name: 'shoes' }
    }
  },
  {
    path: '/products/shoes/nike',
    name: 'shoes',
    meta: { allowGuest: true },
    component: () => import('@/views/products/ShoesNike.vue')
  }
]

注意事项 #

• 禁止使用(.*)匹配单段路径参数，该规则会跨斜杠匹配任意长度的多段路径，必然导致匹配逻辑错乱
• 该写法同时兼容 Vue Router 3（Vue2 配套版本）和 Vue Router 4（Vue3 配套版本），不需要额外安装插件

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