按钮会根据我放置逻辑的位置执行不同的操作

Question

任何人都可以向我解释为什么当我将“所有电影”路由放置在现在的位置时，它会向我的 API 发出 GET 请求，但是当我将它放在“创建”之上时，它会进行重定向，因为它是应该。这是代码：

const routes: Routes = [
 
  {
    path: 'create',
    component: CreateComponent,
    canActivate: [MovieGuardService]
  },
  {
    path: ':id',
    resolve: {
      cres: MovieResolver,
    },
    component: MovieComponent,
  },
  {
    path: ':id/edit',
    resolve: {
      cres: MovieResolver,
    },
    component: EditComponent,
    canActivate: [MovieGuardService]
  },
  {
    path: 'all-movies',
    component: AllMoviesComponent
   },

];

Answer 1

Angular 的 Routes 数组中的路由顺序很重要，因为路由器会按顺序将 URL 与定义的路由进行匹配。输入 URL 时，路由器会尝试从数组顶部开始查找匹配项，并继续查找，直到找到匹配项或到达数组末尾。

在您的代码中，所有电影路由放置在路由数组的底部。当您导航到 /all-movies URL 时，路由器会按顺序将该 URL 与路由进行匹配。由于路由 /:id 中的 :id 参数是可以匹配任何值的通用参数，因此路由器将 /all-movies 视为有效的 :id 参数，并将请求定向到 MovieComponent 而不是 AllMoviesComponent。