Vue3结合Vue Router实现视图切换：子路由视图显示在父组件内容下方的解决方案求助

看起来你遇到的核心问题是父路由组件同时渲染了自身内容和子路由容器，导致跳转到子路由时，父组件的标题、列表和子视图会同时显示。这种情况其实是嵌套路由的常见误区，我们可以通过调整路由结构来优雅解决，完全不需要条件渲染。

问题根源分析 #

你当前的路由配置中，/proyectos对应的AppContent.vue组件本身包含了项目列表等内容，同时又添加了<router-view>作为子路由的渲染出口。这就意味着，当你跳转到/proyectos/crear时，Vue Router会把AppCreate.vue插入到AppContent.vue的<router-view>位置，自然就会和父组件的原有内容共存。

优雅解决方案：拆分路由布局与页面内容 #

我们需要把路由布局容器和具体页面内容分开：创建一个空的父布局组件，仅作为子路由的渲染容器；然后把原来的项目列表页面作为默认子路由，创建页面作为另一个子路由。这样切换子路由时，就会完全替换页面内容，而不是在父内容下方追加。

步骤1：创建空布局组件

新建一个ProjectLayout.vue组件，它只负责承载子路由，没有任何自身内容：

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

步骤2：调整路由配置

修改你的路由数组，让/proyectos指向这个空布局，然后把原来的AppContent.vue设为默认子路由（访问/proyectos时显示），AppCreate.vue作为crear子路由：

const routes = [
  {
    path: '/proyectos',
    name: 'Project',
    component: () => import('../views/project/ProjectLayout.vue'),
    children : [
      // 默认子路由：访问 /proyectos 时显示项目列表
      {
        path: '',
        name: 'ProjectList',
        component: () => import('../views/project/AppContent.vue')
      },
      // 创建项目子路由
      {
        path: 'crear',
        name: 'ProjectCreate',
        component: () => import('../views/project/AppCreate.vue')
      }
    ]
  },
];

步骤3：修改原父组件内容

回到AppContent.vue，移除里面的<router-view>标签——现在它是一个独立的页面组件，不再需要作为子路由容器：

<template>
  <h2>Proyectos</h2>
  <div class="actions">
    <router-link to="/proyectos/crear" class="action__add">
      <i class="material-icons-outlined"> add </i>
      Crear Proyecto
    </router-link>
    <input type="text" class="action__search" placeholder="Buscar..." />
  </div>
  <div class="grid-content">
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
  </div>
  <!-- 移除了<router-view>标签 -->
</template>
<script>
import ListProject from '../../components/project/ListProject.vue';
export default {
  components: { ListProject },
};
</script>

为什么这种方式更优？ #

1. 符合路由设计理念：利用Vue Router的嵌套路由机制管理页面切换，结构清晰易维护；
2. 扩展性强：以后如果要添加编辑项目、项目详情等页面，直接在children数组里新增子路由即可；
3. 布局复用方便：如果后续需要给所有项目页面添加统一的侧边栏、顶部导航，只需要修改ProjectLayout.vue，所有子页面都会自动继承布局。

内容的提问来源于stack exchange，提问作者cosmos multi