javascript - Angular 路由困惑/奇怪的行为

Question

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

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

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

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

我有以下路由配置，但我遇到了令人困惑/奇怪的行为。

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

当我尝试导航到 http://localhost:4200/123 时，我收到 404 not found？预期的行为是这应该导航到 taskList.component 并将 123 添加到激活的路由参数中......

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

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

知道如何实现上述目标/我的问题可能是什么吗？

我的路由模块代码:

    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 { }

应用程序组件.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(即使在开发环境中)。所以试试这个:https://stackoverflow.com/a/35285068/4718434 . (同样在生产环境中，您应该将服务器配置为在每个路径上返回 Angular html 文件。)