Angular 9 перенаправление маршрутизатора с ** не работает правильно - PullRequest
Новая
       8

Angular 9 перенаправление маршрутизатора с ** не работает правильно

0 голосов
/ 23 апреля 2020

У меня есть ** путь, который должен загрузить landing, если маршрут not found, но вместо этого он загружает посадку каждый раз, например, 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-адреса в указанный модуль c? Я имею в виду, если URL-адрес маршрутизатора не найден.

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Вам нужно разместить маршрутный символ маршрута внизу. Маршрутизатор проверяет первое найденное совпадение 

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

Это подробно объясняется в документации

Порядок маршрутов

Порядок маршрутов важен, поскольку при сопоставлении маршрутов Маршрутизатор использует стратегию выигрыша с первым совпадением, поэтому более конкретные маршруты c следует размещать над менее конкретными маршрутами c. Сначала перечислите маршруты с указанием пути c, за которым следует пустой маршрут, который соответствует маршруту по умолчанию. Маршрут с подстановочными знаками стоит последним, потому что он соответствует каждому URL, и Маршрутизатор выбирает его только в том случае, если другие маршруты не совпадают первыми.

1 голос
/ 23 апреля 2020

Вы должны переместить не найденный маршрут в конце маршрута. 

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