Nuxt 3路由参数提取异常问题求助

你的问题出在Nuxt3的动态路由匹配规则上：默认情况下，Vue Router的动态参数:param会匹配到下一个路径分隔符（/）或者路由结尾。你的路由文件命名为exam_[id]_[applicant_id].vue，但访问路由是http://localhost:3000/e-recruitment/exam_cl96q0u040000v1ocg2ffryio_3，这里的下划线并不是参数的分隔符，系统会把cl96q0u040000v1ocg2ffryio_3整个当成id的参数值，自然无法正确提取applicant_id。

下面是两种解决方法：

• 修改路由文件命名格式：把下划线换成连字符，将路由文件改为exam-[id]-[applicant_id].vue，对应的访问路由调整为http://localhost:3000/e-recruitment/exam-cl96q0u040000v1ocg2ffryio-3。这样Nuxt会自动识别两个独立的动态参数，直接通过route.params.id和route.params.applicant_id就能获取对应的值。

• 自定义路由匹配正则：如果不想改动现有路由格式，可以在nuxt.config.ts中通过extendRoutes配置自定义匹配规则，限定参数的匹配范围：

export default defineNuxtConfig({
  router: {
    extendRoutes(routes, resolve) {
      const targetRoute = routes.find(route => route.path.includes('exam_'))
      if (targetRoute) {
        // 根据你的参数格式调整正则，这里假设id为字母数字组合，applicant_id为数字
        targetRoute.path = '/e-recruitment/exam_:id([\\w]+)_:applicant_id(\\d+)'
      }
    }
  }
})

配置完成后，重新启动项目，访问原路由即可正确拆分两个动态参数。

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