Vue路由问题：点击Add后子组件与父组件同时显示如何解决？

你的问题核心在于嵌套路由的渲染逻辑：当访问子路由/about/add时，父路由组件AboutView会被完整渲染，子组件HomeView只是插入到AboutView内部的<router-view>中，所以父组件里的Add按钮等内容会和子组件同时显示。要实现访问/about/add时仅显示HomeView，可以通过以下两种专业方案解决：

方案1：将/about/add改为同级路由 #

调整路由配置，把/about/add从/about的子路由改为同级路由，这样访问该路径时不会渲染AboutView，直接渲染HomeView：

const routes = [
  // 其他路由...
  {
    path: '/about',
    component: AboutView // 这里AboutView只保留Add按钮和router-link，不需要<router-view>
  },
  {
    path: '/about/add',
    component: HomeView
  }
]

这种方案最简单，适合不需要共享父组件布局的场景。

方案2：拆分父组件为布局+默认子组件 #

如果希望保留/about作为父路径的结构，可以把原AboutView拆分为两部分：

1. 一个仅包含<router-view>的布局组件（比如AboutLayout.vue）
2. 原AboutView的内容（Add按钮、router-link）作为/about的默认子组件（比如AboutMain.vue）

路由配置调整： #

const routes = [
  // 其他路由...
  {
    path: '/about',
    component: AboutLayout, // 仅包含<router-view />的布局组件
    children: [
      { path: '', component: AboutMain }, // 默认子路由，显示原AboutView的内容
      { path: 'add', component: HomeView }
    ]
  }
]

AboutLayout.vue代码示例： #

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

AboutMain.vue代码示例： #

<template>
  <div>
    <!-- 原AboutView中的Add按钮和router-link -->
    <router-link to="/about/add">Add</router-link>
  </div>
</template>

这样访问/about时，AboutLayout会渲染AboutMain（显示Add按钮）；访问/about/add时，AboutLayout会渲染HomeView，不会同时显示父组件内容。

为什么命名视图没用？ #

命名视图的作用是在同一个页面中，将不同组件渲染到指定名称的<router-view>中，本质还是在父组件布局内渲染多个组件，无法实现替换父组件内容的需求，所以不适用你的场景。

内容的提问来源于stack exchange，提问作者hung kun