动态路由实现多级分类跳转的核心是路径参数嵌套、路由懒加载与递归匹配逻辑，通过/:slug*捕获任意深度路径，在组件内解析层级并逐级请求数据，配合动态菜单、面包屑及SEO优化。
动态路由实现多级分类跳转，核心在于“路径参数嵌套 + 路由懒加载 + 递归匹配逻辑”，不是靠硬写N层固定路由，而是用一个灵活的动态段（比如 /:slug*）捕获任意深度的路径，并在组件内解析层级结构。
一、用通配符捕获任意层级路径
Vue Router 或 React Router 都支持星号通配（*）或连字符通配（...），用于接收多段路径。例如：
- Vue Router 4+：配置
{ path: '/category/:slug*', component: CategoryPage } - React Router 6.22+：使用
path="category/*"，再通过useParams().\*获取完整子路径 - 注意：不要写成
/:a/:b/:c这类固定参数——它无法支持3级以上或不规则深度
二、在页面组件中解析路径并请求对应分类数据
拿到类似 "electronics/phones/iphone/accessories" 的路径后，不能直接当ID用，要拆解、逐级查询：
- 按
/分割得到数组：["electronics", "phones", "iphone", "accessories"] - 从前到后累进拼接 slug（如
"electronics"→"electronics/phones"→ …），每步调接口查该节点是否存在、是否为叶子节点 - 若某级未命中，返回 404；若最后一级是分类页，渲染列表；若是末级商品页，跳转详情（可额外约定末尾加
.html或用 query 区分）
三、导航菜单与面包屑需同步支持无限级
静态菜单写死三级就失效了，得靠动态生成：
- 菜单：从根分类开始，每次展开只拉取当前选中节点的直系子类（避免一次性加载整棵树）
- 面包屑：根据当前路径数组，对每一级调用
getCategoryBySlug(片段)，获取名称和链接，组装成可点击链路 - 推荐给每个分类加唯一
full_slug字段（如"electronics/phones/iphone"），数据库建前缀索引加速查询
四、SEO 和服务端渲染要注意路径规范
搜索引擎和 SSR 环境下，不能只依赖前端 JS 解析：
- 后端需配置统一 fallback：所有
/category/\*\*请求都命中同一个 SSR 入口或静态页面模板 - 页面
必须根据实际分类动态注入，不能写死 - 生成 sitemap.xml 时，需递归导出所有有效分类路径（建议限制最大深度为6，防爆栈或爬虫陷阱）
不需要预定义10个路由文件，也不用写5层嵌套路由配置。关键在路径捕获方式、后端分类模型设计、以及前端按需解析逻辑——三层能跑，三十层也能跑，只要数据结构撑得住。
