[slug].vue与[...slug].vue的区别及命名规则技术咨询

这俩是Nuxt路由体系里的两种完全不同的规则，绝不是随便改个命名就行的，核心差异如下：

1. [slug].vue：单层级动态路由 #

• 只能匹配单一段动态路径，比如/articles/hello-world这种场景，此时slug参数的值就是hello-world
• 没法处理多层级路径，比如/articles/2024/hello-world就匹配不到这个文件，得用嵌套动态路由或通配路由才能覆盖

2. [...slug].vue：通配/捕获所有路由 #

• 能匹配任意层级的动态路径，不管是/articles/hello-world，还是/articles/2024/hello-world/comments/1这类深层路径，都能被这个文件处理
• 捕获到的路径会以数组形式返回给slug参数：比如上面的多层路径，slug的值就是['2024', 'hello-world', 'comments', '1']
• 还能作为兜底路由使用——如果放在pages根目录，所有没被其他路由定义的路径都会默认落到这里

关键提醒 #

别误以为方括号里随便命名都有效，比如[$$$slug].vue这种写法Nuxt完全不识别，...是Nuxt路由系统的特定语法前缀，只有加了它，才会触发“捕获所有层级”的通配逻辑，否则就是普通的单层级动态路由。

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