vue多层次路由如何在一个页面切换显示

现有如下路由，对应菜单的三个层级：父菜单，子菜单，孙子菜单。

{
      path: '/father',
      name: 'Father',
      redirect: { name: childrenA },
      component: AppLayout,
      meta: {
        icon: 'el-icon-s-tools',
        hasMulSub: true,
      },
      children: [
        {
          path: '/father/childrenA',
          name: 'childrenA',
          component: childrenA,
          meta: {
            auth: GENERAL,
          },
        },
        {
          path: '/father/childrenB',
          name: 'childrenB',
          redirect: { name: childrenB-A },
          component: childrenB,
          meta: {
            auth: GENERAL,
            hasMulSub: true,
          },
          children: [
            {
              path: '/father/childrenB/childrenB-A',
              name: 'childrenB-A',
              component: childrenB-A,
              meta: {
                auth: GENERAL,
              },
            },
            {
              path: '/father/childrenB/childrenB-B',
              name: 'childrenB-B',
              component: childrenB-B,
              meta: {
                auth: GENERAL,
              },
            },
          ],
        },
      ],
    },

AppLayout作为最外层的布局组件，父组件在其上面布局，其中的router-view作为子组件的入口。

<!-- AppLayout组件 -->
<template>
  <el-container>
    <AppSidebar />
    <el-container
      direction="vertical"
    >
      <AppHeader />
      <el-main>
        <transition
          name="move"
          mode="out-in"
        >
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

存在孙子组件的子组件创建如下组件以实现孙子组件的切换。

<!-- childrenB组件 -->
<template>
    <router-view />
</template>