嵌套路由问题 vue 3

Question

所以这是我的问题：

这是我的： 应用程序

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

当您登录时，它会重定向到：Main.vue 具有并重定向到路由内的项目。 当您选择一个项目时，它会显示该项目以及我拥有的一个项目：

import ProjectChat from "../project-chat/Project-Chat.vue"

  components: {
    ProjectChat, // -> has a <router-view></router-view>
  },

它应该显示在我的项目ChatList中 问题是它没有显示projectChatList，而只显示

Hello

import Login from "@/views/login/Login.vue";
import Main from "@/views/main/Main.vue";
import ProjectChat from "@/views/project-chat/Project-Chat.vue"
import ProjectChatList from "@/components/project-chat/Project-chat-list.vue"
import NewProjectChat from "@/components/project-chat/new-project-chat/New-project-chat.vue"
import NewProjectDialog from "@/components/project-chat/project-chat-dialog/Project-chat-dialog.vue"

import store from "../store";

const Projects = () => import('@/views/projects/Projects.vue')
const Project = () => import('@/views/project/Project.vue')


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

const ifAuthenticated = (to, from, next) => {
  debugger;
  console.log(store.getters.isAuthenticated,"store.getters.isAuthenticated")
  if (store.getters.isAuthenticated) {
    next();
    return;
  }
  next("/login");
};

const ifNotAuthenticated = (to, from, next) => {
  debugger;
  if (!store.getters.isAuthenticated) {
    next();
    return;
  }
  next("/");
};

const routes: Array<RouteRecordRaw> = [
  { path: "/login", name: 'login',  component: Login, beforeEnter: ifNotAuthenticated },
  { path:'/:catchAll(.*)', redirect: "/" },
  {
    beforeEnter: ifAuthenticated,
    path: "/",
    name: 'main', 
    component: Main,
    children: [
      {
        path: "",
        name: "projects",
        component: Projects,
      },
      {
        path: "/project/:id",
        name: "project",
        component: Project,
        children: [
          {
            path: "/projectChat",
            name: 'projectChat', 
            component: ProjectChat,
            redirect: "/projectChatList",
            children: [
              {
                path: "/projectChatList",
                name: "projectChatList",
                component: ProjectChatList,
              },
              {
                path: "/newProjectChat/:projectId",
                name: "newProjectChat",
                component: NewProjectChat,
              },
              {
                path: "/projectDialog/:projectId/:dialogId",
                name: "projectDialog",
                component: NewProjectDialog,
              },
            ],
          },
        ]
      },
    ],
  },

  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Main.vue

<template>
    <div id="app-wrapper">
      <NavMenu />
      <el-main>
      <router-view></router-view>
      </el-main>
      </div>
</template>

Project-Chat.vue

<template>
        <h1>Hello</h1>
<router-view></router-view>

</template>

它应该如何： 应用程序

| Main.vue - 带有 NavBar 组件和一个 | -> 显示所有项目。

Main.vue

| Project.vue里面有

ProjectChat.vue

|有一个应该显示 ProjectChatList | * 我的问题：现在显示 ProjectChatList