Vue.js Nasted路由问题vue 3

这就是我的问题：

这是我的： App.vue

当您登录时，它将重定向到：Main.vue 在路由中有一个链接并重定向到项目。 当您选择一个项目时，它会显示该项目，并且在项目中我有：

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

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

从“./project chat/project chat.vue”导入ProjectChat
组成部分：{
ProjectChat，//->具有
},

它应该显示在我的项目聊天列表中 问题是它没有显示projectChatList，只显示Hello

从“@/views/Login/Login.vue”导入登录名；
从“@/views/Main/Main.vue”导入Main；
从“@/views/project chat/project chat.vue”导入ProjectChat
从“@/components/project chat/project chat list.vue”导入项目聊天列表
从“@/components/project chat/new project chat/new project chat.vue”导入NewProjectChat
从“@/components/project chat/project chat dialog/project chat dialog.vue”导入新项目对话框
从“./store”导入存储；
const Projects=（）=>import（“@/views/Projects/Projects.vue”）
const Project=（）=>import（“@/views/Project/Project.vue”）
从“vue路由器”导入{createRouter，createWebHistory，RouterRecordRaw}；
常量ifAuthenticated=（到、从、下一个）=>{
调试器；
log（store.getters.isAuthenticated，“store.getters.isAuthenticated”）
if（store.getters.isAuthenticated）{
next（）；
返回；
}
下一步（“/login”）；
};
常量ifNotAuthenticated=（到、从、下一个）=>{
调试器；
如果（！store.getters.isAuthenticated）{
next（）；
返回；
}
下一个（“/”）；
};
常量路由：数组=[
{路径：“/login”，名称：'login'，组件：login，在输入：ifNotAuthenticated}之前，
{path:'/：catchAll（.*），重定向：“/”}，
{
进入前：如果经过验证，
路径：“/”，
名称：'main'，
组成部分：主要，
儿童：[
{
路径：“”，
名称：“项目”，
构成部分：项目，
},
{
路径：“/project/：id”，
名称：“项目”，
组成部分：项目，
儿童：[
{
路径：“/projectChat”，
名称：“projectChat”，
组件：ProjectChat，
重定向：“/projectChatList”，
儿童：[
{
路径：“/projectChatList”，
名称：“项目聊天列表”，
组件：ProjectChatList，
},
{
路径：“/newProjectChat/：projectId”，
名称：“newProjectChat”，
组件：NewProjectChat，
},
{
路径：“/projectDialog/：projectId/：dialogId”，
名称：“项目对话框”，
组件：NewProjectDialog，
},
],
},
]
},
],
},
// {
//路径：'/about'，
//姓名：'关于'，
////路由级代码拆分
////这将为此路由生成一个单独的块（关于[hash].js）
////访问路由时延迟加载的。
//组件：（）=>导入（/*webpackChunkName:“关于”*/'../views/about.vue'）
// }
];
const router=createRouter({
历史记录：createWebHistory（process.env.BASE_URL），
路线，
});
导出默认路由器；

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>

你好

应该如何： App.vue |Main.vue-内部带有导航栏组件和 |->显示所有项目

Main.vue |Project.vue具有内部

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

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

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

</template>