我基本上是在尝试这样做：

path: '/',
name: '',
components: {
  appbar: () => import('@/components/Appbar.vue'),
  navigation: () => import('@/components/Navigation.vue'),
  default: () => import('@/views/Triple.vue')
},
children: [
  {
    path: '',
    name: 'home',
    components: {
      first: {
        component: () => import('@/views/Table.vue'),
        children: [
          {
            path: '',
            component: () => import('@/components/home/tableone.vue')
          }
        ]
      },
      second: {
        component: () => import('@/views/Table.vue'),
        children: [
          {
            path: '',
            component: () => import('@/components/home/tabletwo.vue')
          }
        ]
      },
      third: {
        component: () => import('@/views/Table.vue'),
        children: [
          {
            path: '',
            component: () => import('@/components/home/tablethree.vue')
          }
        ]
      }
    }
  },

其中：
表vue本质上只是一个<router-view></router-view>
Triple Vue本质上是三个<router-view name="first"></router-view>，分别用于在页面上呈现第一个、第二个和第三个组件。
我正在尝试使用Vue Router 4构建我的UI，以尽可能多地重用组件。
有没有一种方法可以使用命名视图为子级提供完整的定义，或者有没有更好的方法？