Angular 5命名路由出口URL修改：保持功能不变调整显示格式

完全可以把http://.../me/(me:personal)这种命名路由格式的URL改成更友好的http://.../me/personal，同时丝毫不影响原有功能。核心思路是调整路由配置，给命名出口的组件绑定一个普通的路径，而不是依赖Angular默认生成的带括号的URL格式。

具体实现步骤 #

1. 调整路由配置 #

首先修改你的路由模块，给需要加载到命名出口的组件指定一个普通的path，同时通过outlet属性指定对应的命名出口：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MeComponent } from './me/me.component';
import { PersonalComponent } from './me/personal/personal.component';

const routes: Routes = [
  {
    path: 'me',
    component: MeComponent,
    // 子路由配置：用普通路径绑定命名出口组件
    children: [
      // 可选：设置默认跳转，访问/me时自动加载personal组件
      { path: '', redirectTo: 'personal', pathMatch: 'full' },
      // 关键：path设为"personal"，同时指定outlet为"me"
      { path: 'personal', component: PersonalComponent, outlet: 'me' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 保留命名路由出口的模板 #

在承载命名出口的父组件（比如MeComponent）模板里，继续保留原来的命名出口，不需要做任何修改：

<!-- me.component.html -->
<div class="me-container">
  <h2>个人中心</h2>
  <!-- 命名出口依然保留，组件会正常加载到这里 -->
  <router-outlet name="me"></router-outlet>
</div>

3. 更新导航方式 #

之前你可能用routerLink="/me/(me:personal)"或者代码里的outlets语法导航，现在可以直接使用普通的路径导航：

模板中导航：

<!-- 原来的写法 -->
<a routerLink="/me/(me:personal)">个人信息</a>

<!-- 现在改成更简洁的写法 -->
<a routerLink="/me/personal">个人信息</a>

代码中导航：

// 原来的写法
this.router.navigate([{ outlets: { me: 'personal' } }], { relativeTo: this.route });

// 现在可以简化为
this.router.navigate(['personal'], { relativeTo: this.route });
// 或者绝对路径
this.router.navigate(['/me/personal']);

为什么这样可行？ #

Angular路由允许你将普通路径与命名出口绑定，本质上是告诉路由系统：当用户访问/me/personal时，把PersonalComponent加载到me这个命名出口里，而不是默认的匿名出口。这样既实现了URL的美化，又完全保留了命名路由出口的隔离加载能力。

注意事项 #

• 如果你的应用中有多个命名出口，只需在对应的子路由中分别指定outlet属性即可，互不影响。
• 确保pathMatch: 'full'只在必要的地方使用（比如默认跳转路由），避免路由匹配异常。

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