硅基同事埋的坑，我用2小时才填平：Nuxt 4 路由踩坑：可选参数 [[id]] 与 [id] 的区别

目录问题背景问题原因解决方案核心区别实现方案关键点调试技巧总结个人网站在开发博客系统时遇到了一个路由不生效的问题/section可以访问但/section/id却始终无法匹配。折腾了一番后发现是 Nuxt 文件路由的可选参数语法理解有误。问题背景需求很简单/blog→ 显示博客列表默认选中第一篇文章/blog/kubernetes-1-32-release→ 显示博客列表选中指定文章最初创建了两个路由文件pages/ ├── [section].vue # 匹配 /blog └── [section]/ └── [id].vue # 匹配 /blog/xxx结果/blog正常/blog/kubernetes-1-32-release却始终匹配不上。问题原因最初采用了两个独立文件的方式pages/ ├── [section].vue # 匹配 /blog └── [section]/ └── [id].vue # 匹配 /blog/xxx这种结构看似合理实则存在多个问题代码重复两个文件 95% 代码相同维护成本高状态同步需要额外处理跨页面状态共享路由匹配某些情况下 Nuxt 无法正确区分两个路由导致/blog/xxx匹配失败解决方案Nuxt 提供了可选路由参数语法 ——双括号[[param]]用一个文件同时处理两种情况pages/ └── [section]/ └── [[id]].vue # 同时匹配 /blog 和 /blog/xxx核心区别语法含义匹配示例[id]必需参数/blog/abc✅ //blog❌[[id]]可选参数/blog/abc✅ //blog✅[[id]]是 Nuxt/Vue Router 的特殊语法表示该参数可以存在也可以不存在。实现方案合并后的[[id]].vuescript setup const route useRoute() const section route.params.section const articleId route.params.id // 可能为 undefined // 有 id 用 id没有则用 firstArticleId const activeArticleId ref(articleId || firstArticleId) // 监听路由变化SPA 导航时更新 watch(() route.params.id, (newId) { if (newId) activeArticleId.value newId }) // 点击文章时更新 URL const handleSelectArticle (id) { activeArticleId.value id navigateTo(/${section}/${id}, { replace: true }) } /script关键点route.params.id可能为undefined需要提供默认值添加路由监听SPA 内导航时 URL 变化不会重新执行 setup需要 watchnavigateTo更新 URL选中文章时同步 URL支持分享和书签调试技巧在排查过程中发现 Nuxt 4 的console.log在 SSR 阶段可能被过滤。一个实用的做法是在 composable 中添加显眼前缀export function useContentArticles(section: string) { console.log( [useContentArticles] section:, section) console.log( [useContentArticles] cache keys:, Object.keys(sectionDataCache)) // ... }终端输出 [useContentArticles] section: blog [useContentArticles] cache keys: [ blog, interview, nuxt4 ]总结场景推荐方案单一页面 可选子路径[[id]].vue完全不同的两个页面分开两个文件参数必需[id].vue可选参数[[param]]是 Nuxt 文件路由的利器用好了可以大幅减少代码重复。但要注意处理undefined的情况和路由变化的监听。延伸阅读nuxt4完整系统持续更新中。。。内容有帮助点赞、收藏、关注三连评论区等你