Vue 3 路由器问题 - 路由器导航到父路由器而不是子路由器

Question

问题：当我登录时，它会向我显示包含所有项目的主页，这就是它应该的样子。

• 当我选择一个项目时，它正在导航到选定的项目，但由于某种原因，我可以看到两次我的导航栏，而且它似乎是从 App.vue 而不是 Main.vue 进行导航

路由器：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import Login from "@/views/login/Login.vue";
import Main from "@/views/main/Main.vue";

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

const routes: Array<RouteRecordRaw> = [
  { path: "/login", component: Login },
  { path: "/:pathMatch(.*)", redirect: "/" },
  {
    path: "/",
    component: Main,
    children: [
      { path: "/projects", component: Projects },
      { path: "/projects/:id", component: Project, props:true },
    ],
  },

];

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

export default router;

App.vue

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

Main.vue

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

如何修复它以便在我选择项目时它会在 Main.vue 中导航？

项目 - 在 Main.vue 中导航 - 按预期工作。

项目 - 在 App.vue 中导航 - 问题。