当前位置：首页 > news >正文

nextjs路由[[...slug]]与[...slug]的区别

news 2025/10/30 12:06:31

`[...slug]`- 必需捕获所有路由

// app/blog/[...slug]/page.js

在 Next.js 中，[[...slug]]和 [...slug]都是动态路由的语法，但有一个关键区别：

匹配的路径：

✅ /blog/a
✅ /blog/a/b
✅ /blog/a/b/c
❌ /blog(不匹配！会显示 404)

参数示例：

// 访问 /blog/nextjs/tutorial/1
export default function Page({ params }) {console.log(params.slug) // ['nextjs', 'tutorial', '1']return <div>...</div>
}

`[[...slug]]`- 可选捕获所有路由

// app/blog/[[...slug]]/page.js

匹配的路径：

✅ /blog(也匹配！)
✅ /blog/a
✅ /blog/a/b
✅ /blog/a/b/c

参数示例：

// 访问 /blog
export default function Page({ params }) {console.log(params.slug) // undefinedreturn <div>博客首页</div>
}// 访问 /blog/nextjs/tutorial
export default function Page({ params }) {console.log(params.slug) // ['nextjs', 'tutorial']return <div>博客详情</div>
}

实际应用场景对比

`[...slug]`的使用场景:

// 商品详情页 - 必须有商品路径
// app/product/[...slug]/page.js
// 只能匹配：/product/electronics/phone/123
// 不能匹配：/product (需要单独的 product/page.js)

`[[...slug]]`的使用场景：

// 文档页面 - 可以同时处理文档首页和子页面
// app/docs/[[...slug]]/page.js
// 匹配：/docs (文档首页)
// 匹配：/docs/getting-started (子页面)
// 匹配：/docs/getting-started/installation (更深层页面)

文件结构示例

app/
├── shop/
│   ├── [...slug]/
│   │   └── page.js      # 只匹配 /shop/xxx/xxx，不匹配 /shop
│   └── page.js          # 单独处理 /shop 首页
│
└── docs/└── [[...slug]]/└── page.js      # 同时处理 /docs 和 /docs/xxx/xxx

参数处理代码示例

// 使用 [[...slug]] 时需要处理 slug 可能为 undefined 的情况
export default function DocsPage({ params }) {const slug = params.slug || [] // 防止 undefinedif (slug.length === 0) {return <div>文档首页</div>}if (slug.length === 1) {return <div>分类页面: {slug[0]}</div>}return <div>文档详情: {slug.join('/')}</div>
}

总结区别：

特性	`[...slug]`	`[[...slug]]`
是否必需	✅ 必须提供参数	❌ 参数可选
匹配根路径	❌ 不匹配	✅ 匹配
使用场景	必须有参数的页面	可同时处理首页和子页面
参数处理	`params.slug`总是数组	`params.slug`可能是 undefined