如何在有很多孩子的Vue中嵌套路由？

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from '../components/ParentComponent.vue';
import ChildComponent from '../components/ChildComponent.vue';

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>