实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

    1. /user/foo/profile                                    /user/foo/posts
    2. *-----------------*                                *------------------*
    3. | User                        |                                |    User                         |
    4. |    *-------------* |                                |    * -------------* |
    5. | |Profile            | |                                |    |    Posts                 | |
    6. | |                            | |                                | |                             | |
    7. |    *------------*| |                                | * -------------* |
    8. *-----------------*                                *------------------*

    借助 vue-router ,使用嵌套路由配置，就可以很简单地表达这种关系。

    接着上节创建的 app：

    1. <div id="app">
    2.   <router-view></router-view>
    3. </div>
    1. const User = {
    2.     template:'<div> User {{$route.param.id}}</div>'
    3. }
    5. const router = new VueRouter({
    6.     routes:[
    7.         { path:'user/:id',component:User}
    8.     ]
    9. })

    这里的 router-view 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件相同可以包含自己的嵌套 router-view .例如：在User组件的模板添加一个 ：

    1. const User = {
    2.     template:`
    3.         <div class="user">
    4.             <h2> User {{$route.params.id}} </h2>
    5.             <router-view></router-view>
    6.         </div>
    7.     `
    8. }

    要在嵌套的出口中渲染组件，需要在VueRouter 的参数中使用 children 配置：

    1. const router = new VueRouter({
    2.     routes:[
    3.     { path:'/user/:id',component:User,
    4.         children:[
    5.         {
    6.           // 当 /user/:id/profile 匹配陈工，
    7.           // UserProfile 会被渲染在 User 的<router-view> 中
    8.           path:'profile',
    9.             component:UserProfile
    10.         },
    11.         {
    12.             // 当 /user/:id/posts 匹配陈工
    13.           // UserPosts 会被渲染在 User 的 <router-view> 中
    14.           path:'posts',
    15.           components:UserPosts
    16.         }
    17.       ]
    18.     }
    19.   ]
    20. }

    要注意，以 / 开头的嵌套路径会被当做根路径。这让你充分的使用嵌套组件而无需设置嵌套的路径。

    你会发现，    children 配置就像是 routes **配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

    此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个个空的 子路由

    1. const router = new VueRouter({
    2.     routes:[
    3.     {
    4.         path:'/user/:id',
    5.       component:User,
    6.       children:[
    7.           // 当/user/:id 匹配成功
    8.         // UserHome 会被渲染在 User 的<router-view> 中
    9.         {
    10.             path:'',component:UserHome
    12.           // ... 其他子路由
    13.         }
    14.       ]
    15.     }
    16.   ]
    17. })

    提供以上案例的可运行代码请移步这里