该页面分别在左中右放置了router-view ，想要在同一页面有多个router-view，路由文件要做好相应配置，router-view也要加上name属性

注意：children里的components是带有s的，并且components中的key对应页面中router-view的name属性，key是default则对应无name属性的router-view

router/index.ts

import Add from '../components/Add.vue'
import Done from '../components/Done.vue'
import Delete from '../components/Delete.vue'

const routes: Array<RouteRecordRaw> = [  
 {
    path: '/manyRouterView',
    name: 'manyRouterView',
    component: () => import('../views/manyRouterView.vue'),
    children: [
      {
        path: '',
        name: 'many',
        components: { default: Add, done: Done, delete: Delete }
      }
    ]
  }
]

components中的组件自行随意写写吧

manyRouterView.vue

<template>
  <div class="many-router-view">
    <h1>多个router-view</h1>
    <div class="box">
      <div class="item">
        <h4>添加待办</h4>
        <router-view class="rv" />
      </div>
      <div class="item">
        <h4>已办</h4>
        <router-view name="done" class="rv" />
      </div>
      <div class="item">
        <h4>已删除</h4>
        <router-view name="delete" class="rv" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.many-router-view {
  .box {
    display: flex;
    .item {
      border-right: 2px solid deeppink;
    }
    .rv {
      width: 300px;
      margin: 50px;
    }
  }
}
</style>

这样就可以在一个页面使用多个路由出口了