一、前言

在構建中大型單頁應用（SPA）時，頁面結構往往比較復雜，比如儀表盤、用戶中心、商品管理等模塊通常包含多個子功能頁面。為了更好地組織這些頁面，Vue Router 提供了嵌套（多級）路由的功能。

通過嵌套路由，我們可以在父級組件中嵌入一個 <router-view> 來展示子級組件，實現類似“布局 + 內容”的結構。

本文將帶你深入了解：

• Vue 嵌套路由的基本概念；
• 如何配置嵌套路由；
• 父子組件之間的結構關系；
• 實際開發中的常見使用場景；
• 推薦的最佳實踐；

通過這篇文章，你將能夠熟練地使用 Vue Router 構建具有層級結構的頁面系統。

二、什么是嵌套路由？

嵌套路由（Nested Routes） 是指在一個路由下掛載多個子路由，形成父子結構。常用于構建帶有布局結構的頁面，如側邊欄 + 主體內容。

? 示例結構：

/dashboard├─ /dashboard/profile      → 用戶資料頁└─ /dashboard/settings     → 設置頁

?? 特點：

• 父級路由對應一個布局組件（Layout）；
• 子路由組件通過 <router-view> 在父組件內部展示；<