vue3的router.ts中，在children和不在的区别

项目结构：

代码：

router.ts:

import {createRouter, createWebHistory} from "vue-router";


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('../views/layout/AppLayout.vue'),
            children: [
                {
                    path: '/index',
                    name: 'index',
                    component: () => import('../views/Index.vue')
                },
            ]
        },

        {
            path: '/about',
            name: 'about',
            component: () => import('../views/About.vue')
        }
    ]
})

export default router

APP.vue:

<script setup lang="ts">

</script>

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

<style scoped>

</style>

APPLayout.vue:

<template>
  <div class="common-layout">
    <el-container>
      <AppAside />
      <el-container class="header-and-main">
        <AppHeader />
        <el-main>
          <el-scrollbar>
            <router-view />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.header-and-main{
  flex-direction: column;
  height: 100vh;
}
</style>

<script setup lang="ts">
import AppAside from "./AppAside.vue";
import AppHeader from "./AppHeader.vue";
</script>

About.vue:

<script setup lang="ts">

</script>

<template>
这是一个关于页面
</template>

<style scoped>

</style>

Index.vue:

<script setup lang="ts">

</script>

<template>
默认显示的首页
</template>

<style scoped>

</style>

运行效果：

子路由/index：

父路由/about：