先看效果：三块有颜色的Foo页面，Bar页面，baz页面  分别由不同的视图渲染出来，每个视图渲染一个组件； 但是路由却是一个；即一个路由下有三个视图，每个视图渲染一个组件；

配置如下：

路由配置

  {
    name:'my', 
    path:'/my',
    component: () => import('../views/my.vue'),
    redirect: '/my/namedView',// 表示进入/my时重定向到/my/namedView，这样进入/my时第一个子组件就显示了
    children: [ 
      {
        name:'namedView', 
        path:'/my/namedView',
        components:{
          default:() => import('../views/comp/Foo.vue'),
          a:() => import('../views/comp/Bar.vue'),
          b:() => import('../views/comp/Baz.vue')
        }
      } ,
      {
        name:'namedView2', 
        path:'/my/namedView2',
        components:{
          default:() => import('../views/comp/Foo2.vue'),
          a:() => import('../views/comp/Bar2.vue'),
          b:() => import('../views/comp/Baz2.vue')
        }
      } 
    ]
  } 

.vue文件配置：

<template>
  <div>
    <div>我的页面</div> 
    <router-link to="namedView">命名视图组合一</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;
    <router-link :to="{path:'/my/namedView2'}">命名视图组合二</router-link>
    <br />下面有视图三个，有一个是默认命名的，两个是重新命名的====》配置好命名视图，路由中配置好组件，可以让不同的组件显示在不同的路由中；
    <!-- 默认命名视图 -->
    <router-view class="view one"></router-view>
    <!-- 重新命名的视图a -->
    <router-view class="view two" name="a"></router-view>
    <!-- 重新命名的视图b -->
    <router-view class="view three" name="b"></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.one {width: 100%;height: 100px;border: 1px solid red;background:skyblue;}
.two {width: 20%;height: 300px;float: left;border: 1px solid blue;background:salmon;}
.three {width: 80%;height: 300px;float: right;border: 1px solid orange;background:chartreuse;}
</style>

代码地址： https://github.com/yindong999/Vue-demo.git