实际生活中的应用界面，通常由多层嵌套的组件组合而成。比如二级菜单，三级菜单。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。最外层 是最顶层的出口，渲染最高级路由匹配到的组件。 同样地，一个被渲染组件同样可以包含自己的嵌套 。要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({ routes: [ { path: ‘/article/:id’, component: Article}, { path: ‘/user/:id’, component: User, children: [ {path: ‘profile’, component: UserProfile}, {path: ‘posts’, component: UserPosts }] }] })
<div id=“app”><router-view></router-view></div> 根组件 App <div id=“User”><router-view></router-view></div> 子组件 User下面是一个小例子，使用的就是嵌套路由
运行结果： 在这里我们是在teacher页面使用了嵌套路由，所以当我们点击“跳转teacher页面”时，我们的页面显示为： 当再次点击“a页面”时，展示”a-list页面“子页面， 点击b页面同样如此
