Angular 路由 confusion/strange 行为

Question

我有一个包含三个兄弟路由的基本路由。父路由路由到我的任务-list.component.ts，其中包含导航栏和路由器出口。

我想在基本路由上有一个路由参数，我可以在其中添加一个可选的令牌

所以当我导航到 http://localhost:4200 时，令牌应该是未定义的。

当我导航到 http://localhost:4200/123 时，令牌在激活的路由参数中应该是 123

我有以下路由配置，但我遇到了 confusing/strange 行为。

当我导航到 http://localhost:4200 时，我按预期到达了基地 taskList.component。

当我尝试导航到 http://localhost:4200/123 时，出现 404 未找到？预期的行为是这应该导航到 taskList.component 并向激活的路由参数添加 123...

更奇怪的是，当我在我的导航栏中单击已删除的 link 时，它再次导航到父组件 app.component，然后我才被“删除”为激活的路由参数中的值。 .

更奇怪的是：当我使用浏览器导航到 http://localhost:4200 时，它没有将 deleted 设置为令牌，而是我得到了 404 not found again...

知道我如何才能解决 above/what 我的问题吗？

我的路由模块代码：

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { AppComponent } from './app.component';
    import { TaskListComponent } from './task/task-list/task-list.component';
    import { CompletedTasksComponent } from './task/completed-tasks/completed-tasks.component';
    import { DeletedTasksComponent } from './task/deleted-tasks/deleted-tasks.component';
    
    
const routes: Routes = [  
  { path: '', component: TaskListComponent, pathMatch: 'full' },
  { path: 'completed', component: CompletedTasksComponent },
  { path: 'deleted', component: DeletedTasksComponent },
  { path: ':token', component: TaskListComponent },  
  { path: ':token/completed', component: CompletedTasksComponent },
  { path: ':token/deleted', component: DeletedTasksComponent }
];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

app.component.html:

<nav mat-tab-nav-bar>
    <a mat-tab-link
    *ngFor="let link of links"
    [routerLink]="navigate(link)"
    (click)="activeLink = link"
    [active]="activeLink == link">{{link}}</a>
    

    </nav>


<router-outlet></router-outlet>

app.component.ts 导航方法

navigate(link) {
    switch(link) {
      case 'Task List':
        return `${this.token}`;
      case 'Completed Tasks':
        return `${this.token}/completed`;
      case 'Deleted Tasks':
        return `${this.token}/deleted`;
    }
  }

Answer 1

旧答案：您的路线有一些问题。你可以像这样修复它：

    RouterModule.forRoot([
      { path: "", component: TaskListComponent, pathMatch: "full" },
      { path: "deleted", component: DeletedTasksComponent },
      { path: ":id", component: TaskListComponent },
      { path: ":id/completed", component: CompletedTasksComponent },
      { path: ":id/deleted", component: DeletedTasksComponent }
    ])

Run It On Stackblitz

更新：根据您的编辑和评论，现在应用程序导航可以正常工作，但刷新页面时会出现 404（即使在开发环境中）。所以试试这个：。（同样在生产环境中，您应该将服务器配置为每个路径上的 return angular html 文件。）

Angular 路由 confusion/strange 行为

Angular routing confusion/strange behavior

javascript

types

angular-routing

angular