Vue 3中带连字符的路由路径为何无法正常工作？

你在配置Vue Router 4（版本^4.2.5）的404路由时，遇到了以下问题：

使用带连字符的参数命名时路由无法正常工作：

{
      path: '/:not-found(.*)',
      name:'Not-Found',
      component : NotFound
}

改用驼峰式参数命名后路由正常运行：

{
      path: '/:notFound(.*)',
      name:'Not-Found',
      component : NotFound
} 

原因解析 #

Vue Router的动态路由参数命名必须符合JavaScript标识符的命名规则：

• 只能包含字母、数字、下划线（_）和美元符号（$）
• 不能以数字开头
• 不允许包含连字符（-）这类特殊字符

当你使用:not-found作为参数名时，连字符的存在违反了标识符规则，导致Vue Router无法正确解析这个参数，进而影响路由的匹配逻辑；而:notFound是合法的驼峰式标识符，能被路由系统正确识别，因此可以正常触发404路由。

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