vue-router 命名视图案例

有的时候想在页面中同时展示多个视图，而不是切换形式的嵌套展示，这个时候拥有多个出口的router-view就能很方便的实现;
现在有这么一个场景：有一个一个页面由左侧侧边栏tab页组成，右边是对应tab所显示的内容，其中一个tab的内容由2个组件构成，那么使用命名视图该如何实现？
下面就是实现的过程：

1、创建good-children.vue文件

<template>
  <div class="box">
    <div class="btns">
      <router-link to="/class1" router-link-active="active">班级1的优秀学生信息</router-link>
      <br>
      <router-link to="/class2">班级2的优秀学生信息</router-link>
    </div>
    <div class="children">
      <!--有多个出口的router-view 没有指定name的router-view默认值为default，指定name的需要与路由配置index.js中的值一致-->
      <router-view></router-view>
      <router-view name="studentExact"></router-view>
    </div>
  </div>

</template>

<script>
export default {}
</script>

<style scoped>
  .box{
    display: flex;
    justify-content: space-around;
  }
  .box .btns{
    width: 20%;
    border:1px solid #000;
    height: 200px;
    line-height: 100px;
    text-align: center;
  }
  .box .children{
    width: 80%;
    border:1px solid #000;
    height: 200px;
    line-height: 100px;
    text-align: center;
  }
  .router-link-active{
    background: #ffc325;
    border: 1px solid #ffc325;
    padding:5px 8px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
  }
</style>

2、创建children1.vue文件

<template>
  <div>
    children1 用户详情
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

3、创建children2.vue文件

<template>
  <div>
    children2 用户详情
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

4、创建children3.vue文件

<template>
  <div>
    children3 用户详情
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>

5、对路由文件index.js进行命名视图路由的配置

import Vue from 'vue';
import Router from 'vue-router';
import goodChildren from '@/components/good-children';
import children1 from '@/components/children1';
import children2 from '@/components/children2';
import children3 from '@/components/children3';

Vue.use(Router);

export default new Router({
  routes: [
    //命名视图的路由配置
    {
      path:'/good-children',
      component:goodChildren,
      children:[
        {
          path:'/class1',
          component:children1
        },
        {
          path:'/class2',
          components:{
            default:children2,
            studentExact:children3
          }
        }
      ]
    }
  ]
})

6、显示效果