Angular 9 路由器重定向与**不能正常工作。

Question

我有 ** 路径 landing 如果路线 not found 但它每次都会加载登陆，例如www.page.comcontacts -> 显示登陆时有www.page.comcontacts url，但联系人存在于我的页面中。如何加载它，只有当路由没有找到？

const routes: Routes = [
  {
    path: AppRoutes.admin,
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    pathMatch: 'full'
  },
 {
path: "**",
loadChildren: () => import('./public/landing/landing.module').then(m => m.LandingModule),
 }
  {
    path: '',
    loadChildren: () => import('./public/landing/landing.module').then(m => m.LandingModule),
  },
  {
    path: `${AppRoutes.content}/:name`,
    loadChildren: () => import('./public/contents/contents.module').then(m => m.ContentsModule),
  },

  {
    path: AppRoutes.cars,
    loadChildren: () => import('./public/cars/cars.module').then(m => m.CarsModule),
  },
  {
    path: AppRoutes.private,
    loadChildren: () => import('./public/tours/tours.module').then(m => m.ToursModule),
  },
  {
    path: AppRoutes.vehicles,
    loadChildren: () => import('./public/carlist/carlist.module').then(m => m.CarlistModule),
  },
  {
    path: `${AppRoutes.paymentsCancel}`,
    loadChildren: () => import('./public/cancel/cancel.module').then(m => m.CancelModule),
  },
  {
    path: `${AppRoutes.paymentsConfirm}`,
    loadChildren: () => import('./public/success/success.module').then(m => m.SuccessModule),
  },

];

有没有什么简单的方法来重定向所有错误的网址到一个特定的模块？我的意思是，如果路由器的网址没有找到。

Answer 1

你需要把通配符路由放在底部。路由器会检查它能找到的第一个匹配点

const routes: Routes = [
  // ...
  {
    path: `${AppRoutes.paymentsConfirm}`,
    loadChildren: () => import('./public/success/success.module').then(m => m.SuccessModule),
  },
  {
    path: "**",
    loadChildren: () => import('./public/landing/landing.module').then(m => m.LandingModule),
  }
];

这一点在 文件

路线顺序

路由的顺序很重要，因为Router在匹配路由时，采用先匹配胜出的策略，所以较特殊的路由应该放在较不特殊的路由之上。先列出静态路径的路由，然后是空路径路由，匹配默认路由。通配符路由排在最后，因为它与每个URL都匹配，只有当没有其他路由先匹配时，Router才会选择它。

Answer 2

你应该把not found route移到路由的最后。

const routes: Routes = [
  {
    path: AppRoutes.admin,
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminModule),
    pathMatch: 'full',
  },
  {
    path: '',
    loadChildren: () =>
      import('./public/landing/landing.module').then((m) => m.LandingModule),
  },
  {
    path: `${AppRoutes.content}/:name`,
    loadChildren: () =>
      import('./public/contents/contents.module').then((m) => m.ContentsModule),
  },

  {
    path: AppRoutes.cars,
    loadChildren: () =>
      import('./public/cars/cars.module').then((m) => m.CarsModule),
  },
  {
    path: AppRoutes.private,
    loadChildren: () =>
      import('./public/tours/tours.module').then((m) => m.ToursModule),
  },
  {
    path: AppRoutes.vehicles,
    loadChildren: () =>
      import('./public/carlist/carlist.module').then((m) => m.CarlistModule),
  },
  {
    path: `${AppRoutes.paymentsCancel}`,
    loadChildren: () =>
      import('./public/cancel/cancel.module').then((m) => m.CancelModule),
  },
  {
    path: `${AppRoutes.paymentsConfirm}`,
    loadChildren: () =>
      import('./public/success/success.module').then((m) => m.SuccessModule),
  },
  {
    path: '**',
    loadChildren: () =>
      import('./public/landing/landing.module').then((m) => m.LandingModule),
  },
];