>[success] # 路由嵌套 1. 嵌套路由當多個路由的組件都有相同的內容，可以將這些相同內容提取到**公共的組件當中** 2. 嵌套的時候在路由對象中增加`children`對象，負責嵌套路由創建的路由對象`children`屬性實現，`childern`下路由需要被渲染的`<router-view> `是要寫在起對應的上級視圖組件中 * 路徑為`/user/:id` 他是通過將`User` 組件渲染到外層的`<router-view> `，而嵌套組成后的路由`/user/:id/profile` 和` /user/:id/posts` 依次需要`User` 組件內的`<router-view> ` 來對應映射渲染組件`UserProfile` 和 `UserPosts`  ~~~ <div id="app"> <!--我渲染外層路由對應組件 User--> <router-view></router-view> </div> ~~~ ~~~ const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <!--我渲染User 內部路由對應組件 --> <router-view></router-view> </div> `, } ~~~ ~~~js const routes = [ { path: '/user/:id', component: User, children: [ { // 當 /user/:id/profile 匹配成功 // UserProfile 將被渲染到 User 的 <router-view> 內部 path: 'profile', component: UserProfile, }, { // 當 /user/:id/posts 匹配成功 // UserPosts 將被渲染到 User 的 <router-view> 內部 path: 'posts', component: UserPosts, }, ], }, ] ~~~ 3. 整渲染過程 **先加載外層組件 在加載內層組件(childern)** 當然路由過程也是如此**內外層合并后的整體作為路由地址**，說明一下以上面案例為例 訪問地址`/user/:id` 他會渲染出來`User` 組件但不會渲染出`User `內部嵌套的`router-view` 組件 只有`/user/:id/profile` 路徑能渲染出`User` 和內部嵌套的`profile` 4. 想讓訪問 `/user/:id/` 達到渲染出`User` 和內部嵌套的`profile`，可以提供一個空的嵌套路徑 ~~~ const routes = [ { path: '/user/:id', component: User, children: [ // 當 /user/:id 匹配成功 // profile將被渲染到 User 的 <router-view> 內部 { path: '', component: profile}, // ...其他子路由 ], }, ] ~~~