在嵌套的子路线中定义父级的渲染命名视图组件

Question

我正在使用vue.js构建应用程序。主要布局如下图所示。

我有两个导航区域和一个内容区域（在下图中标记为绿色）。导航区域称为路由器视图，内容区域定义为默认路由器视图。

呈现到默认视图中的组件还具有其他路由器视图（在下图中标记为蓝色）。

我尝试实现的目标是，根据/settings/accounts和mainNav和应用default这样的路由，取自settings路由配置组件和这些视图设置组件的sideNav和default来自嵌套子路由配置。

直到现在我还没有找到解决方案。我怎样才能实现这个目标？

样机显示主要应用程序结构以及命名路由器视图的名称：

绿色：App.vue中的路由器视图
蓝色：Settings.vue中的路由器视图

App.vue

<template>
  <div id="app">
    <h1>Header</h1>
    <div class="col-span-2"><router-view name="mainNav" /></div>
    <div class="border"><router-view name="sideNav" /></div>
    <div class="border"><router-view /></div>
  </div>
</template>

Settings.vue

<template>
  <section>
    <router-view></router-view>
  </section>
</template>

router.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import * as settingView from '@/views/settings'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  ...
  {
    path: '/settings',
    components: {
      default: settingView.Settings,
      navigation: settingView.MainNavigation,
    },
    children: [
      {
        path: '',
        alias: 'general',
        components: {
          default: settingView.General,
          sideNavigation: settingView.GeneralNavigation,
        }
      },
      {
        path: 'accounts',
        components: {
          default: settingView.Accounts,
          sideNavigation: settingView.AccountNavigation,
        },
      },
      {
        path: 'repositories',
        components: {
          default: settingView.Repositories,
          sideNavigation: settingView.RepositoryNavigation,
        },
      },
    ],
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router