Vue中嵌套路由的使用方法

实际生活中的应用界面，通常由多层嵌套的组件组合而成。比如二级菜单，三级菜单。同样地，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页面同样如此