Nuxt.js动态路由命名中使用连字符报错该如何解决？

Nuxt 解析动态路由文件名时，下划线后跟随的内容会被直接识别为路由参数的变量名。由于 JavaScript 变量命名规则不允许包含中划线（-），_article-name.vue 会被解析生成名为 article-name 的非法变量，因此触发项目报错。

• 方案1：调整路由文件命名为驼峰格式
  将文件名修改为 _articleName.vue，完全符合语法规则。你可以在页面内正常调用参数：
  • Nuxt2 中调用：this.$route.params.articleName
  • Nuxt3 中调用：useRoute().params.articleName
• 方案2：有URL参数格式要求时自定义路由规则
  如果你的业务需要URL中保留 article-name 格式的参数名（比如SEO相关要求），可以在 Nuxt 配置文件中扩展路由规则：

  // nuxt.config.js 示例（Nuxt2同理可适配）
  export default {
    router: {
      extendRoutes (routes, resolve) {
        routes.push({
          path: '/your-path/:article-name(.*)?',
          component: resolve(__dirname, 'pages/_articleName.vue')
        })
      }
    }
  }
  

  配置完成后路由文件仍使用驼峰命名即可，外部访问时URL可以正常使用带中划线的参数形式。

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