路由器链接重写 url 参数

Question

我的应用程序从以下路径 http://example.com/start 开始，在我使用 [routerLink] 之后，我希望开始的子字符串将被覆盖。

我尝试在 Angular 中更改路由，并在 Internet 上进行搜索，但没有找到任何解决方案。如果我点击链接，那么我的路径将如下所示http://example.com/start/newStart/123

<a [routerLink]="['/newStart', id]></a>

我的路由如下所示：

const routes: Routes = [
  { path: '', redirectTo: '/start', pathMatch: 'full' },
  { path: 'star', component: StartComponent },
  { path: ':id/:id', component: NewComponent },
  { path: '**', component: StartComponent }
];

我想要的是如果我点击链接来自的 URL 路径

http://example.com/start

应该是

http://example.com/newStart/123

解决方案

这对我有用。我只是在 newStart 之前添加斜线。

 <a [routerLink]="['/newStart', id]">

Answer 1

这是stackblitz demo。

使用以下链接：

<a [routerLink]="['start']">Start</a>
<a [routerLink]="['newStart', 123]">New start</a>

以及以下路由定义：

const routes: Routes = [
  { path: '', redirectTo: 'start', pathMatch: 'full' },
  { path: 'start', component: StartComponent },
  { path: 'newStart/:id', component: NewComponent },
  { path: '**', redirectTo: 'start' }
];

有两个组件StartComponent 和NewComponent， angular 会将您重定向到加载时的StartComponent (example.com -> example.com/start)。

当您单击newStart 链接时，url 将变为example.com/newStart/123，并且路由器将使用路由参数id = 123 加载NewComponent。