如何修复未显示子路由的 Vue 3 路由？

Question

背景：在大型 SPA 上工作并将其转换为 Vue 3。目前正在设置应用程序结构，一切都很好，直到我尝试在路线之间合并过渡/动画。 我正在为每个类别使用带有下拉菜单的顶部栏导航。 如下所示，“仪表板”和“客户”。

问题：单击其中一个下拉链接时，Vue 会加载父 state，但不会在第一次单击同级路由树时加载子 state。 例如：

• 作品：我从仪表板 A 开始并导航到仪表板 B (/dashboards/dashboard-b/)； 这按预期工作。 仪表板 B 内容加载。
• 不起作用：我从仪表板 A 或 B 开始，然后导航到 AllCustomers、BadCustomers 或 Good Customer（/customers/all-customers/ 等）。 视图区域变为空白，父视图加载（客户），子路由不加载。

另外，在 App.vue 中，当我删除时：

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component"></component>
  </transition>
</router-view>

...并用一个简单的<router-view />替换它，这个问题就不会发生（但是我不能让视图中的转换工作。

有谁知道为什么会这样？

const routes = [
  {
    path: '/',
    name: 'Dashboards',
    component: () => import('../views/dashboards/Dashboards.vue'),
    children: [
      {
        path: 'dashboard-a',
        component: () => import('../views/dashboards/DashboardA.vue'),
      },
      {
        path: 'dashboard-b',
        component: () => import('../views/dashboards/DashboardB.vue'),
      }
    ]
  },
  {
    path: '/customers',
    name: 'Customers',
    component: () => import('../views/customers/Customers.vue'),
    children: [
      {
        path: 'all-customers',
        name: 'AllCustomers',
        component: () =>
          import('../views/customers/AllCustomers.vue'),
      },
      {
        path: 'bad-customers',
        name: 'BadCustomers',
        component: () =>
          import('../views/customers/BadCustomers.vue'),
      },
      {
        path: 'good-customers',
        name: 'GoodCustomers',
        component: () =>
          import('../views/customers/GoodCustomers.vue'),
      }
    ]
  },
  {
    path: '/:catchAll(.*)',
    component: NotFound,
  },
];

应用程序.vue：

<template>
  <app-header>

  </app-header>
  <div class="app-body">

    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component"></component>
      </transition>
    </router-view>
    
  </div>
</template>

<script>
import AppHeader from './components/app-header/app-header.vue';

export default {
  components: {
    'app-header': ApsAppHeader
  },
}
</script>

<style lang="scss">

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to {
    opacity: 1;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease-out;
  }

</style>

Customers.vue （dashboards.vue 格式相同）

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

<script>
export default {
  name: 'Customers'
}
</script>

好客户.vue

<template>
  <transition name="fade">

    <app-layout template-type="left-column-and-lg-header">
      <div>GoodCustomers Content</div>
    </app-layout>

  </transition>
</template>

<script>
export default {
  name: 'Customers'
}
</script>