Vue嵌套路由疑问：CRUD场景是否适用？父子组件为何同时显示？

你对嵌套路由的理解存在偏差——嵌套路由的核心是路由结构对应组件的布局层级，不是强制要同时渲染父子组件，要不要同时显示完全由你的布局设计决定。下面针对你的疑问拆解说明：

1. 先澄清你的误区 #

你遇到的“访问/projects/:id/edit时同时显示项目详情和编辑表单”，是因为你把ProjectsEdit设为ProjectsView的子路由，且在ProjectsView组件中放置了<router-view>，导致子组件被渲染在父组件的指定区域。这不是嵌套路由的问题，是你把编辑页的路由结构和布局需求匹配错了。

如果编辑页是完全独立的页面（不需要共享详情页的任何内容），那它就不应该作为/projects/:id的子路由，保持你当前的扁平路由配置就完全合理。

2. CRUD场景下什么时候用嵌套路由？ #

嵌套路由的核心价值是复用公共布局/组件，当你的CRUD相关页面存在以下情况时，非常适合使用：

• 多个项目子页面（比如详情页的人员列表、文档页、日志页）需要共享项目头部（如项目名称、状态标签）、侧边导航（项目内的功能菜单）等公共元素；
• 切换子页面时，希望公共部分保持不变，只更新核心内容区域，提升用户体验。

举个适合嵌套路由的例子（针对你要新增的/projects/:id/people路由）：

{
  path: '/projects/:id',
  name: 'ProjectsView',
  component: ProjectsView,
  children: [
    // 默认子路由：访问/projects/:id时渲染详情核心内容
    { path: '', component: ProjectsDetailContent },
    // 人员列表子路由：共享父组件的公共布局
    { path: 'people', name: 'ProjectPeople', component: ProjectPeople }
  ]
},
// 编辑页作为独立路由，无需共享布局
{ path: '/projects/:id/edit', name: 'ProjectsEdit', component: ProjectsEdit },
{ path: '/projects', name: 'ProjectsList', component: ProjectsList, meta: { title: 'List projects' } },
{ path: '/projects/add', name: 'ProjectsAdd', component: ProjectsAdd }

此时ProjectsView组件负责渲染项目名称、顶部导航等公共部分，<router-view>用来渲染ProjectsDetailContent或ProjectPeople，切换路由时公共区域不会重新渲染，只更新内容区。

3. 什么时候不用嵌套路由？ #

如果你的CRUD页面都是完全独立的（比如详情页和编辑页没有任何可复用的布局元素），或者希望切换路由时整个页面完全刷新替换，那保持当前的扁平路由结构就好，没必要强行使用嵌套路由。

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