如何正确配置Angular嵌套路由 解决/list/:id加载组件错误问题

问题根因 #

你第一种路由配置没有语法错误，问题核心是父路由绑定的组件需要预留子路由的渲染入口：
当你给path: 'list'直接绑定component: ListComponent时，Angular 会把ListComponent渲染到上层的<router-outlet>中，而它的子路由path: ':id'对应的ViewComponent，默认会渲染到ListComponent模板内部的<router-outlet>里。你访问/list/:id只看到ListComponent，就是因为ListComponent的模板里没有添加<router-outlet>占位，子组件没有渲染位置，自然不会显示。

两种实现方案对应不同业务需求 #

方案1：保留父子组件嵌套结构 #

如果你的业务需求是/list/:id页面要包含ListComponent的内容（比如左侧是列表、右侧是详情的布局），不需要修改路由配置，直接在ListComponent的模板里添加<router-outlet>即可：

<!-- list.component.html 模板 -->
<!-- 原有列表逻辑代码 -->
<div class="detail-container">
  <router-outlet></router-outlet>
</div>

此时访问/list会仅展示列表内容，访问/list/[id值]会在列表内容的基础上，在<router-outlet>位置渲染ViewComponent的内容。

方案2：同路由分组下的独立页面 #

如果你的业务需求是/list和/list/:id是完全独立的两个页面，不需要互相嵌套内容，你写的第二种配置就是标准实现：

{
  path: 'list',
  children: [
    { path: '', component: ListComponent },
    { path: ':id', component: ViewComponent }
  ]
}

这种写法下path: 'list'本身没有绑定组件，两个子路由的内容都会渲染到上层的<router-outlet>，实现两个页面完全独立展示，同时路由在逻辑上仍然归属于list分组，不会破坏路由层级的分类逻辑。

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