Angular 8嵌套路由URL格式优化：去除命名路由出口特殊格式

你遇到的这个URL格式问题，根源在于使用了命名路由出口（named outlet），Angular对命名出口会生成带括号的特殊URL结构。要改成简洁的http://localhost:4200/#/admin/products格式，只需要调整路由结构和模板里的路由出口即可，具体步骤如下：

1. 修改路由配置，移除命名出口 #

把原来路由里的outlet: 'private-content'属性删掉，让子路由直接关联到父组件的默认路由出口：

const appRoutes: Routes = [
  { path: '', component: LoginPageComponent, pathMatch: 'full' },
  { 
    path: 'admin', 
    component: PrivateContentTemplateComponent,
    children: [
      { path: '', component: HomePageComponent, pathMatch: 'full' },
      { path: 'products', component: ProductListPageComponent }
    ] 
  },
];

2. 确保父组件使用默认路由出口 #

在PrivateContentTemplateComponent的模板文件中，把带名字的<router-outlet name="private-content"></router-outlet>改成不带名字的默认出口：

<!-- PrivateContentTemplateComponent 模板内容示例 -->
<div class="admin-layout">
  <!-- 这里可以保留你的侧边栏、顶部导航等布局元素 -->
  <div class="content-area">
    <router-outlet></router-outlet> <!-- 默认路由出口 -->
  </div>
</div>

为什么这样改能解决问题？ #

Angular的命名路由出口是为了在同一个页面中同时渲染多个独立的路由组件（比如侧边栏和主内容区各自走不同路由），这种场景下才需要特殊的URL格式来区分不同出口的路由。而你的需求是普通的层级路由，用默认的子路由嵌套就足够了，这样生成的URL就是自然的层级结构，完全符合你想要的简洁效果。

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