一、前言

在构建中大型单页应用（SPA）时，页面结构往往比较复杂，比如仪表盘、用户中心、商品管理等模块通常包含多个子功能页面。为了更好地组织这些页面，Vue Router 提供了嵌套（多级）路由的功能。

通过嵌套路由，我们可以在父级组件中嵌入一个 <router-view> 来展示子级组件，实现类似“布局 + 内容”的结构。

本文将带你深入了解：

• Vue 嵌套路由的基本概念；
• 如何配置嵌套路由；
• 父子组件之间的结构关系；
• 实际开发中的常见使用场景；
• 推荐的最佳实践；

通过这篇文章，你将能够熟练地使用 Vue Router 构建具有层级结构的页面系统。

二、什么是嵌套路由？

嵌套路由（Nested Routes） 是指在一个路由下挂载多个子路由，形成父子结构。常用于构建带有布局结构的页面，如侧边栏 + 主体内容。

✅ 示例结构：

/dashboard├─ /dashboard/profile      → 用户资料页└─ /dashboard/settings     → 设置页

📌 特点：

• 父级路由对应一个布局组件（Layout）；
• 子路由组件通过 <router-view> 在父组件内部展示；<