Rerezz的回答很不错，但它有一个严重的缺陷。它会导致User组件重新运行ngOnInit方法。

当你在那里做一些繁重的工作时它可能会有问题当你从非参数路线切换到参数路线时，你不希望它重新运行。虽然这两个路由是为了模仿一个可选的url参数，而不是成为两个独立的路由。

下面是我解决这个问题的建议:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

然后，您可以将负责处理参数的逻辑移动到UserWithParam组件，并将基本逻辑留在User组件中。无论你在User::ngOnInit中做什么，当你从/ User导航到/ User /123时，都不会再次运行。

不要忘记在User的模板中放入<router-outlet></router-outlet>。

Angular 4 -解决可选参数排序的方案:

这样做:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

注意，products和products/:id路由的命名完全相同。对于没有参数的路由，Angular 4会正确地遵循products，如果有参数，它会遵循products/:id。

然而，非参数路由产品的路径不能有后面的斜杠，否则angular会错误地将其视为参数路径。在我的例子中，我用后面的斜杠表示产品，但它不起作用。

不要这样做:

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

这样，在添加参数时就不会重新呈现组件。

Rerezz的回答很不错，但它有一个严重的缺陷。它会导致User组件重新运行ngOnInit方法。

当你在那里做一些繁重的工作时它可能会有问题当你从非参数路线切换到参数路线时，你不希望它重新运行。虽然这两个路由是为了模仿一个可选的url参数，而不是成为两个独立的路由。

下面是我解决这个问题的建议:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

然后，您可以将负责处理参数的逻辑移动到UserWithParam组件，并将基本逻辑留在User组件中。无论你在User::ngOnInit中做什么，当你从/ User导航到/ User /123时，都不会再次运行。

不要忘记在User的模板中放入<router-outlet></router-outlet>。

这里建议的答案，包括来自rerezz的接受答案，它建议添加多个路由条目。

然而，当路由表项之间发生变化时，即在带参数的路由表项和不带参数的路由表项之间，组件将被重新创建。

如果你想避免这种情况，你可以创建自己的路由匹配器来匹配这两个路由:

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

然后在路由配置中使用matcher:

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

你可以定义多个带参数和不带参数的路由:

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

并在组件中处理可选参数:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

参见相关的github问题:https://github.com/angular/angular/issues/3525