Angular 9 路由器重定向 ** 无法正常工作

Question

我有 ** 路径，如果路线 not found 应该加载 landing ，但它每次都会加载着陆，例如 www.page.com/contacts ->显示以 www.page.com/contacts 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),
  },

];

有什么简单的方法可以将所有错误的 url 重定向到特定模块吗？我的意思是如果找不到路由器 url。

Answer 1

你应该把找不到的路线移到路线的尽头。

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),
  },
];

Answer 2

你需要把百搭路线放在最下面。路由器检查它能找到的第一个匹配项

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),
  }
];

这在 documentation

中有详细解释

Route order

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route. The wildcard route comes last because it matches every URL and the Router selects it only if no other routes match first.

Angular 9 路由器重定向 ** 无法正常工作

Angular 9 router redirect with ** not working correctly

typescript

progressive-web-apps

angular-universal

angular